(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...
auto:false,
autotime:6000,
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 ::::::::*/
/*:::::::: 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_a=0;
pbslider.slider_b=0;
pbslider.slider_count = 0;
pbslider.slider_navwrap = '
';
pbslider.slider_navpagination ='';
pbslider.slider_navarrows = '
';
/*:::::::: append animation ::::::::*/
$('head').append(
''
);
/*:::::::: onload stuff ::::::::*/
$(window).on('load', 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();
});
/*:::::::: 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_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 div =''
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(''+div+'');
}
}
}
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( pbslider.slider_active)
//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);
}
console.log( pbslider.slider_active)
});
};
/*:::::::: 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(){
//console.log($('#pbslider0').children().eq(pbslider.slider_active).children()[0].duration)
//console.log($('#pbslider0').children().eq(pbslider.slider_active).children()[0].currenttime)
//console.log($('#pbslider0').children().eq(pbslider.slider_active).children()[0].tagname)
if($('#pbslider0').children().eq(pbslider.slider_active).children()[0].tagname=='video'){
if(pbslider.slider_b==0){
$('.o-slider-pagination').children().eq(pbslider.slider_active).children().css({'width':'0%'})
}
pbslider.slider_b=pbslider.slider_b+1
var currenttime=$('#pbslider0').children().eq(pbslider.slider_active).children()[0].currenttime
var duration=$('#pbslider0').children().eq(pbslider.slider_active).children()[0].duration
var a=currenttime/duration;
var b=(a*100).tofixed(0)+"%";
$('.o-slider-pagination').children().eq(pbslider.slider_active).children().css({'width':b})
//$('.o-slider-pagination').children().siblings()[0].css({'width':'0%'})
//console.log($('.o-slider-pagination').html())
}
else{
pbslider.slider_a=pbslider.slider_a+1
$('.o-slider-pagination').children().eq(pbslider.slider_active).children().css({'width':'100%'})
}
if(parseint(b)>97){
if (pbslider.slider_active >= pbslider.slider_count - 1) {
pbslider.pbgoslide(0);
pbslider.slider_b=0
} else {
$(pbslider.slider_wrap + ' .o-slider-next').trigger('click');
pbslider.slider_b=0
}
}
if(pbslider.slider_a>=(slider_opts.autotime/10)){
if (pbslider.slider_active >= pbslider.slider_count - 1) {
pbslider.pbgoslide(0);
pbslider.slider_a=0;
} else {
$(pbslider.slider_wrap + ' .o-slider-next').trigger('click');
pbslider.slider_a=0;
}
}
//document.getelementbyid('hytime').style.width=b;
},10);
}
if(slider_opts.auto===true){
pbslider.auto();
}
pbslider.pbinit(this);
};
}(jquery));
//settimeout(function(){
// $('#pbsliderwrap0').after('')
// },300)