vape_shop/public/assets/index/js/swiper.js

let tap = "ontouchstart" in window ? "tap" : "click";
(function ($, fn) {
    $(document).ready(fn);
}(jQuery, function () {
    var wrap = $(".swiperContainer");
    $.each(wrap, function (index, el) {
        var _this = $(this);
        (function (banner) {
            var navs, imgs, adnav, center, icur, prev, next, showIndex, btn_prev, btn_next, clickDown, bannerTimer, moveEnd;
            if (!banner[0]) return;
            imgs = banner.find(".swiperItem");
            adnav = banner.find(".swiperNav");
            btn_prev = banner.find(".prevbtn");
            btn_next = banner.find(".nextbtn");
            showIndex = 0;
            moveEnd = false;
            clickDown = false;

            function animateLeft(index) {
                if (moveEnd) return;
                moveEnd = true;
                showIndex = index;
                next = imgs.eq(showIndex);
                next.addClass("next");
                navs.removeClass("icur").eq(showIndex).addClass("icur");
                icur.stop().animate({
                    "left": "-100%"
                }, 500, "swing");
                next.stop().animate({
                    "left": "0"
                }, 500, "swing", function () {
                    imgs.removeClass("icur").removeClass("prev").removeClass("next");

                    icur = imgs.eq(showIndex);
                    icur.addClass("icur");

                    imgs.removeAttr("style");
                    moveEnd = false;
                    clickDown = false;
                });
            }

            function animateRight(index) {
                if (moveEnd) return;
                moveEnd = true;
                showIndex = index;
                prev = imgs.eq(showIndex);
                prev.addClass("prev");
                navs.removeClass("icur").eq(showIndex).addClass("icur");
                icur.stop().animate({
                    "left": "100%"
                }, 500, "swing");
                prev.stop().animate({
                    "left": "0"
                }, 500, "swing", function () {
                    imgs.removeClass("icur").removeClass("prev").removeClass("next");
                    icur = imgs.eq(showIndex);
                    icur.addClass("icur");
                    imgs.removeAttr("style");
                    moveEnd = false;
                    clickDown = false;
                });
            }

            function autoplay() {
                showIndex++;
                showIndex %= imgs.length;
                animateLeft(showIndex);
            }

            (
                function () {
                    if (imgs.length < 2) return;
                    center = $("<center></center>");
                    for (var i = 0, len = imgs.length; i < len; i++) {
                        var ovar = $("<span></span>");
                        if (i == 0) {
                            ovar.addClass("icur");
                        }
                        center.append(ovar);
                    }
                    adnav.append(center);
                }(),

                function () {
                    navs = adnav.find("span");
                    icur = imgs.eq(0);
                    icur.addClass("icur");

                    $.each(navs, function (index) {
                        var _this = $(this);
                        (function (nav, index) {
                            nav.hover(function () {
                                var poor = index - showIndex;
                                if (index == showIndex) return false;
                                poor > 0 ? animateLeft(index) : animateRight(index);
                            });
                        }(_this, index));
                    });

                }(),

                function () {
                    if (imgs.length < 2) return;
                    bannerTimer = setInterval(autoplay, 4000);
                    banner.on("mouseenter", function () {
                        clearInterval(bannerTimer);
                    });
                    banner.on("mouseleave", function () {
                        clearInterval(bannerTimer);
                        bannerTimer = setInterval(autoplay, 4000);
                    });
                    banner.on("touchstart", function () {

                        clearInterval(bannerTimer);
                        bannerTimer = setInterval(autoplay, 4000);
                    });
                    banner.touchleft(function () {
                        var num = 0;
                        clearInterval(bannerTimer);
                        num = showIndex + 1;
                        num %= imgs.length;
                        animateLeft(num);
                        bannerTimer = setInterval(autoplay, 4000);
                    });
                    banner.touchright(function () {
                        var num = 0;
                        clearInterval(bannerTimer);
                        num = showIndex - 1;
                        num = num < 0 ? imgs.length - 1 : num;
                        animateRight(num);
                        bannerTimer = setInterval(autoplay, 4000);
                    });
                    btn_prev.on(tap, function () {
                        var num = 0;
                        if (clickDown) return;
                        clickDown = true;
                        clearInterval(bannerTimer);
                        num = showIndex - 1;
                        num = num < 0 ? imgs.length - 1 : num;
                        animateRight(num);
                    });
                    btn_next.on(tap, function () {
                        var num = 0;
                        if (clickDown) return;
                        clickDown = true;
                        clearInterval(bannerTimer);
                        num = showIndex + 1;
                        num %= imgs.length;
                        animateLeft(num);
                    });
                }()
            );
        }(_this));
    });
}));