(function($) {
"use strict";
$.fn.pbTouchSlider = function(options) {
var slider_Opts = $.extend({
slider_Wrap : '', // Assign a unique ID to the div.o-sliderContainer
slider_Item : '.o-slider--item', // Single Item
slider_Drag : true, // Your choise.. to dragIt or not to dragIt..this is the question...
slider_Dots : { // Wanna see dots or not?
class :'.o-slider-pagination',
enabled : true,
preview : true
},
slider_Arrows : { // Wanna see Arrows or not?
class :'.o-slider-arrows',
enabled : true
},
slider_Threshold : 25, // Percentage of dragX before go to next/prev slider
slider_Speed : 1000,
slider_Ease : 'cubic-bezier(0.5, 0, 0.5, 1)', // see http://cubic-bezier.com/
slider_Breakpoints : { // Kind of media queries ( can add more if you know how to do it :D and if you need )
default : {
height : 500 // height on desktop
},
tablet : {
height : 400, // height on tablet
media : 1024 // tablet breakpoint
},
smartphone : {
height : 300, // height on smartphone
media : 768 // smartphone breakpoint
}
}
}, options);
/*:::::::: LOADER ::::::::*/
var loaderHtml = '
';
$(slider_Opts.slider_Wrap).each( function(){$(this).append(loaderHtml);});
function loader(visibility) {
var thisLoader = $(slider_Opts.slider_Wrap +' .loaderWrap');
if (visibility === true)
$(thisLoader).show();
else
$(thisLoader).hide();
}
/*:::::::: RESPONSIVE ::::::::*/
function setResponsive() {
var VW = document.documentElement.clientWidth;
if (VW >= slider_Opts.slider_Breakpoints.tablet.media) {
$(pbSlider.slider_Wrap + '.o-sliderContainer,'+ pbSlider.slider_Wrap + ' ' + pbSlider.slider_Item).css({height: slider_Opts.slider_Breakpoints.default.height});
} else if (VW >= slider_Opts.slider_Breakpoints.smartphone.media) {
$(pbSlider.slider_Wrap + '.o-sliderContainer,'+ pbSlider.slider_Wrap + ' ' + pbSlider.slider_Item).css({height: slider_Opts.slider_Breakpoints.tablet.height});
} else {
$(pbSlider.slider_Wrap + '.o-sliderContainer,'+ pbSlider.slider_Wrap + ' ' + pbSlider.slider_Item).css({height: slider_Opts.slider_Breakpoints.smartphone.height});
}
}
$(window).resize(function() {setResponsive();});
/*:::::::: OBJECT SLIDER ::::::::*/
var pbSlider = {};
pbSlider.slider_Wrap = slider_Opts.slider_Wrap;
pbSlider.slider_Item = slider_Opts.slider_Item;
pbSlider.slider_Dots = slider_Opts.slider_Dots;
pbSlider.slider_Threshold = slider_Opts.slider_Threshold;
pbSlider.slider_Active = 0;
pbSlider.slider_Count = 0;
pbSlider.slider_NavWrap = '';
pbSlider.slider_NavPagination ='';
pbSlider.slider_NavArrows ='';
/*:::::::: APPEND ANIMATION ::::::::*/
$('head').append(
''
);
/*:::::::: INIT ::::::::*/
pbSlider.pbInit = function(selector) {
pbSlider.slider_Draggable = selector;
pbSlider.slider_Count = $(pbSlider.slider_Wrap).find(pbSlider.slider_Item).length;
$(selector).css('width', pbSlider.slider_Count * 100 + '%');
$(pbSlider.slider_Wrap).find(pbSlider.slider_Item).css({'width': 100 / pbSlider.slider_Count+ '%'});
var incrSlides = 0;
$(pbSlider.slider_Wrap).find(pbSlider.slider_Item).each(function() {
$(this).attr('data-id', 'slide-' + (incrSlides++));
});
if(slider_Opts.slider_Arrows.enabled === true || slider_Opts.slider_Dots.enabled === true ){
$(pbSlider.slider_Wrap).append(pbSlider.slider_NavWrap);
}
if(slider_Opts.slider_Arrows.enabled === true){$(pbSlider.slider_Wrap).append(pbSlider.slider_NavArrows);}
if(slider_Opts.slider_Dots.enabled === true){
var incrPagination = 0;
$(pbSlider.slider_Wrap).append(pbSlider.slider_NavPagination);
for (incrPagination; incrPagination < pbSlider.slider_Count; incrPagination++) {
var activeStatus = incrPagination === pbSlider.slider_Active ? ' class="isActive"' : '';
var gotoSlide = 'data-increase="' + [incrPagination] + '"';
var background = $(pbSlider.slider_Wrap).find("[data-id='slide-" + incrPagination + "']").attr('data-image');
//background = background.replace('url(','').replace(')','').replace(/\"/gi, "");
if(slider_Opts.slider_Dots.preview === true){
$(pbSlider.slider_Wrap).find(pbSlider.slider_Dots.class)
.append(
''+
''+
'');
} else {
$(pbSlider.slider_Wrap).find(pbSlider.slider_Dots.class)
.append('');
}
}
}
setTimeout(function() {
$(pbSlider.slider_Item + '[data-id=slide-' + pbSlider.slider_Active + ']').addClass('isActive');
},400);
/*:::::::: HAMMER => see http://hammerjs.github.io/ ::::::::*/
if(slider_Opts.slider_Drag === true){
$(pbSlider.slider_Draggable).addClass('isDraggable');
var stuff4hammer = document.querySelector(pbSlider.slider_Wrap);
var hammerOpts = {
dragLockToAxis: true,
dragBlockHorizontal: true,
touchAction: 'pan-x',
cssProps: {userSelect: true}
}
var hammertime = new Hammer(stuff4hammer, hammerOpts);
hammertime.on('pan', function(e) {
e.preventDefault();
var percentage = 100 / pbSlider.slider_Count * e.deltaX / window.innerWidth;
var percentageCalc = percentage - 100 / pbSlider.slider_Count * pbSlider.slider_Active;
var notDraggable = $(e.target).find('.slider-textWrap').length;
if(pbSlider.slider_Active != pbSlider.slider_Count-1 && pbSlider.slider_Active != 0){
$(pbSlider.slider_Wrap).find(pbSlider.slider_Item).addClass('isMoving');
}
$(pbSlider.slider_Draggable).css({
'perspective': '1000px',
'backface-visibility': 'hidden',
'transform': 'translateX( ' + percentageCalc + '% )'
});
if (e.isFinal) {
if (e.velocityX > 1) {
pbSlider.pbGoslide(pbSlider.slider_Active - 1);
} else if (e.velocityX < -1) {
pbSlider.pbGoslide(pbSlider.slider_Active + 1);
} else {
if (percentage <= -(pbSlider.slider_Threshold / pbSlider.slider_Count)) {
pbSlider.pbGoslide(pbSlider.slider_Active + 1);
} else if (percentage >= (pbSlider.slider_Threshold / pbSlider.slider_Count)) {
pbSlider.pbGoslide(pbSlider.slider_Active - 1);
} else {
pbSlider.pbGoslide(pbSlider.slider_Active);
}
}
}
});
}
$(pbSlider.slider_Wrap + ' .o-slider-pagination li').on('click', function() {
var this_data = $(this).attr('data-increase');
if(!$(this).hasClass('isActive')){
pbSlider.pbGoslide(this_data);
}
//console.log(this_data + ' / ' + pbSlider.slider_Active );
});
$(pbSlider.slider_Wrap + ' .o-slider-prev').addClass('isDisabled');
$(pbSlider.slider_Wrap + ' .o-slider-arrows li').on('click', function() {
if ($(this).hasClass('o-slider-next')) {
pbSlider.pbGoslide(pbSlider.slider_Active + 1);
} else {
pbSlider.pbGoslide(pbSlider.slider_Active - 1);
}
});
};
/*:::::::: SLIDER ENGINE ::::::::*/
pbSlider.pbGoslide = function(number) {
$(pbSlider.slider_Wrap + ' .o-slider-arrows li').removeClass('isDisabled');
if (number < 0) {
pbSlider.slider_Active = 0;
} else if (number > pbSlider.slider_Count - 1) {
pbSlider.slider_Active = pbSlider.slider_Count - 1;
} else {
pbSlider.slider_Active = number;
}
if (pbSlider.slider_Active >= pbSlider.slider_Count - 1) {
var firstS = $(pbSlider.slider_Wrap).find(pbSlider.slider_Item).first();
$(pbSlider.slider_Wrap + ' .o-slider-next').addClass('isDisabled');
} else if (pbSlider.slider_Active <= 0) {
$(pbSlider.slider_Wrap + ' .o-slider-prev').addClass('isDisabled');
} else {
$(pbSlider.slider_Wrap + ' .o-slider-arrows li').removeClass('isDisabled');
}
if(pbSlider.slider_Active != pbSlider.slider_Count-1 && pbSlider.slider_Active != 0){
$(pbSlider.slider_Wrap).find(pbSlider.slider_Item).addClass('isMoving');
}
$(pbSlider.slider_Draggable).addClass('isAnimate');
var percentage = -(100 / pbSlider.slider_Count) * pbSlider.slider_Active;
$(pbSlider.slider_Draggable).css({
'perspective': '1000px',
'backface-visibility': 'hidden',
'transform': 'translateX( ' + percentage + '% )'
});
clearTimeout(pbSlider.timer);
pbSlider.timer = setTimeout(function() {
$(pbSlider.slider_Wrap).find(pbSlider.slider_Draggable).removeClass('isAnimate');
$(pbSlider.slider_Wrap).find(pbSlider.slider_Item).removeClass('isActive').removeClass('isMoving');
$(pbSlider.slider_Wrap).find(pbSlider.slider_Item + '[data-id=slide-' + pbSlider.slider_Active + ']').addClass('isActive');
//$(pbSlider.slider_Wrap + ' .o-slider--item img').css('transform', 'translateX(0px )');
}, slider_Opts.slider_Speed);
if(slider_Opts.slider_Dots.enabled === true){
var sliderDots = $(pbSlider.slider_Wrap).find(pbSlider.slider_Dots.class + ' > *');
var increase = 0;
for (increase; increase < sliderDots.length; increase++) {
var className = increase == pbSlider.slider_Active ? 'isActive' : '';
$(pbSlider.slider_Wrap).find(sliderDots[increase]).removeClass('isActive').addClass(className);
$(pbSlider.slider_Wrap).find(sliderDots[increase]).children().removeClass('isActive').addClass(className);
}
setTimeout(function() {
$(pbSlider.slider_Wrap).find(sliderDots).children().removeClass('isActive');
},500);
}
pbSlider.slider_Active = Number(pbSlider.slider_Active);
};
pbSlider.auto = function() {
pbSlider.autoTimer = setInterval(function() {
if (pbSlider.slider_Active >= pbSlider.slider_Count - 1) {
pbSlider.pbGoslide(0);
} else {
$(pbSlider.slider_Wrap + ' .o-slider-next').trigger('click');
}
}, 3000);
}
//pbSlider.auto();
pbSlider.pbInit(this);
/*:::::::: ONlOAD STUFF ::::::::*/
$(document).ready(function(){
$(pbSlider.slider_Item).each(function(){
var bg = $(this).attr('data-image');
$(this).css({'background-image':'url('+bg+')'});
});
setTimeout ( function(){
loader(false);
},1000);
$(pbSlider.slider_Wrap + ' .o-slider-controls').addClass('isVisible');
$(pbSlider.slider_Draggable).addClass('isVisible');
setResponsive();
});
};
}(jQuery));