_carousels.js 2.28 KB
import Swiper, {
  Navigation,
  Pagination,
  A11y,
  Keyboard
} from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/keyboard';
import 'swiper/css/a11y';
import LazyLoad from "vanilla-lazyload";

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





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


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

      var swiper_params = {
          modules: [Navigation, Pagination, A11y, Keyboard],
          slidesOffsetAfter: 0,
          slidesOffsetBefore: 0,
          spaceBetween: 24,
         // centeredSlides: true,
          loop: false,
          lazy: true,
          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,
          },
          breakpoints: {
            1073: {
                slidesPerView: 1,
                slidesPerGroup: 1,
              },
            1074: {
              slidesPerView: 3,
              slidesPerGroup: 3,
            },
          
          },

      };
         var mySwiper =  new Swiper(thisSwiper, swiper_params);

        if ($(window).width() < 1074) {
            mySwiper.destroy(false, true);
            //$('.carousel-items .swiper-wrapper').css('margin-right', '150px')
        };

        $(window).on('resize', function(){
            if ($(window).width() > 1074) {
                 mySwiper =  new Swiper(thisSwiper, swiper_params);
            }else{
                  mySwiper.destroy(false, true);
                 // $('.carousel-items .swiper-wrapper').css('margin-right', '150px')
            }
        });




  });
    // $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));      

    // $(window).on('resize', function(){
    //   $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));      
     
    // });




});