/*=========================================================================================

    File Name: ex-component-swiper.js

    Description: swiper plugin.

    ----------------------------------------------------------------------------------------

    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template

    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,

    },

  });



  // 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));

  });

});

