swiper.js

/*=========================================================================================
    File Name: swiper.js
    Description: swiper plugin
    ----------------------------------------------------------------------------------------
    Item Name: Frest HTML Admin Template
    Version: 1.0
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
$(document).ready(function () {
    //initialize swiper when document ready

    // default
    var mySwiper = new Swiper('.swiper-default');

    // navigation
    var mySwiper1 = new Swiper('.swiper-navigations', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // pagination
    var mySwiper2 = new Swiper('.swiper-paginations', {
        pagination: {
            el: '.swiper-pagination',
        },
    });

    // progress
    var mySwiper3 = new Swiper('.swiper-progress', {
        pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // multiple
    var mySwiper4 = new Swiper('.swiper-multiple', {
        slidesPerView: 3,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });

    // multi row
    var mySwiper5 = new Swiper('.swiper-multi-row', {
        slidesPerView: 3,
        slidesPerColumn: 2,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });

    // centered slides option-1
    var mySwiperOpt1 = new Swiper('.swiper-centered-slides', {
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 30,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // centered slides option-2
    var mySwiperOpt2 = new Swiper('.swiper-centered-slides-2', {
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 30,
    });

    // fade effect
    var mySwiper7 = new Swiper('.swiper-fade-effect', {
        spaceBetween: 30,
        effect: 'fade',
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // cube effect
    var mySwiper8 = new Swiper('.swiper-cube-effect', {
        effect: 'cube',
        grabCursor: true,
        cubeEffect: {
            shadow: true,
            slideShadows: true,
            shadowOffset: 20,
            shadowScale: 0.94,
        },
        pagination: {
            el: '.swiper-pagination',
        },
    });

    // coverflow effect
    var mySwiper9 = new Swiper('.swiper-coverflow', {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true,
        },
        pagination: {
            el: '.swiper-pagination',
        },
    });

    // autoplay
    var mySwiper10 = new Swiper('.swiper-autoplay', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // gallery
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: galleryThumbs
        }
    });

    // parallax
    var mySwiper12 = new Swiper('.swiper-parallax', {
        speed: 600,
        parallax: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // lazy loading
    var mySwiper13 = new Swiper('.swiper-lazy-loading', {
        // Enable lazy loading
        lazy: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // Responsive Breakpoints
    var mySwiper14 = new Swiper('.swiper-responsive-breakpoints', {
        slidesPerView: 5,
        spaceBetween: 50,
        // init: false,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        breakpoints: {
            1024: {
                slidesPerView: 4,
                spaceBetween: 40,
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 30,
            },
            640: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            320: {
                slidesPerView: 1,
                spaceBetween: 10,
            }
        }
    });

    // virtual slides
    var appendNumber = 600;
    var prependNumber = 1;
    var mySwiper15 = new Swiper('.swiper-virtual', {

        slidesPerView: 3,
        centeredSlides: true,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        virtual: {
            slides: (function () {
                var slides = [];
                for (var i = 0; i < 600; i += 1) {
                    slides.push('Slide ' + (i + 1));
                }
                return slides;
            }()),
        },
    });
    $('.slide-1').on('click', function (e) {
        e.preventDefault();
        mySwiper15.slideTo(0, 0);
    });
    $('.slide-250').on('click', function (e) {
        e.preventDefault();
        mySwiper15.slideTo(249, 0);
    });
    $('.slide-500').on('click', function (e) {
        e.preventDefault();
        mySwiper15.slideTo(499, 0);
    });
    $('.prepend-2-slides').on('click', function (e) {
        e.preventDefault();
        mySwiper15.virtual.prependSlide([
            'Slide ' + (--prependNumber),
            'Slide ' + (--prependNumber)
        ]);
    });
    $('.append-slide').on('click', function (e) {
        e.preventDefault();
        mySwiper15.virtual.appendSlide('Slide ' + (++appendNumber));
    });
});