sccs_laravel/resources/js/scripts/extensions/ext-component-swiper.js

/*=========================================================================================
    File Name: ext-component-swiper.js
    Description: swiper plugin
    ----------------------------------------------------------------------------------------
    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
$(function () {
  'use strict';

  //initialize swiper when document ready

  var slide1 = $('.slide-1');
  var slide250 = $('.slide-250');
  var slide500 = $('.slide-500');
  var prepend2Slides = $('.prepend-2-slides');
  var appendSlide = $('.append-slide');

  // 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,
    slidesPerColumnFill: 'row',
    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 swiperLength = $('.swiper-slide').length;
  if (swiperLength) {
    swiperLength = Math.floor(swiperLength / 2);
  }

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

  // Active slide change on swipe
  mySwiper.on('slideChange', function () {
    activeSlide(mySwiper.realIndex);
  });

  //add class active content of active slide
  function activeSlide(index) {
    var slideEl = mySwiper.slides[index];
    var slideId = $(slideEl).attr('id');
    $('.wrapper-content').removeClass('active');
    $('[data-faq=' + slideId + ']').addClass('active');
  }

  // 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;
      })()
    }
  });
  // Go to first slide
  if (slide1) {
    slide1.on('click', function (e) {
      e.preventDefault();
      mySwiper15.slideTo(0, 0);
    });
  }
  // Go to slide 250
  if (slide250) {
    slide250.on('click', function (e) {
      e.preventDefault();
      mySwiper15.slideTo(249, 0);
    });
  }
  // Go to slide 500
  if (slide500) {
    slide500.on('click', function (e) {
      e.preventDefault();
      mySwiper15.slideTo(499, 0);
    });
  }
  // Prepend 2 slides
  if (prepend2Slides) {
    prepend2Slides.on('click', function (e) {
      e.preventDefault();
      mySwiper15.virtual.prependSlide(['Slide ' + --prependNumber, 'Slide ' + --prependNumber]);
    });
  }
  // Append a slide
  if (appendSlide) {
    appendSlide.on('click', function (e) {
      e.preventDefault();
      mySwiper15.virtual.appendSlide('Slide ' + ++appendNumber);
    });
  }
});