(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: 220, // 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_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() {
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;
console.log(pbslider.slider_count);
$(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] + '"';
//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 &&
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);