_carousels.js 1.71 KB
import Swiper from 'swiper';
import {
    Navigation,  
    Pagination,
    A11y,
    Keyboard
} from 'swiper/modules'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/keyboard';
import 'swiper/css/a11y';

jQuery(document).ready(function($) {



  jQuery('.carousel-items').each(function() {

      var offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
      var offsetAfter = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
      var PerView = 'auto';
      var space = 20;
      var SlidesPerGroup= 1;

      var _id = jQuery(this).parent().attr('id');

    

      if ($(window).width() < 600) {
          offset = 0;
          PerView = 1;
          SlidesPerGroup = 1;
          space = 0;
          offsetAfter = 0;
          
      }



      var swiper_params = {
          modules: [Navigation, Pagination, A11y, Keyboard],
          slidesPerView: PerView,
          slidesOffsetAfter: offsetAfter,
          slidesOffsetBefore: offset,
          spaceBetween: space,
          slidesPerGroup:  SlidesPerGroup ,
          pagination: {
              el: ".swiper-pagination",
              type: 'bullets',
              clickable: "true",
          },

          navigation: {
              nextEl: '.swiper-button-next[data-id="' + _id + '"]',
              prevEl: '.swiper-button-prev[data-id="' + _id + '"]',
          },

          a11y: {
              prevSlideMessage: 'Previous slide',
              nextSlideMessage: 'Next slide',
          },
          keyboard: {
              enabled: true,
              onlyInViewport: false,
          },

      };


      new Swiper(this, swiper_params);
      console.log(swiper_params);

  });


});