在不同的设备上调用Jquery命令

Question

我在使用移动设备时制作的事件轮播中遇到了Swiper Demo的问题。在移动设备上，滑动功能似乎没有按照图片的正确顺序移动。我想我搞砸了如何在每个设备上调用jquery。如果你想看看我在这里加载活动轮播www.besocialscene.com

$(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
      //should be for desktop/laptop//
      slidesPerView: 4,
      spaceBetween: 20,
      loop: true,
       navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });  

 if( $(window).width()<= 768){
  var swiper = new Swiper('.swiper-container', {   
     slidesPerView: 'auto',
     spaceBetween: 10,
     centeredSlides: true,
     loop: true,
     navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
     }

   });     
    } else if($(window).width() <= 1024){
        var swiper = new Swiper('.swiper-container', {   
         slidesPerView: 3,
         spaceBetween: 20,
         loop: true,
         navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      }
     });



   }   

   $('[data-ctabtn]').on('click', function() {
    var idx = $(this).data('ctabtn');
    $('.event' + idx + 'back').show();
    $('.event' + idx + 'front').remove();
 });
}); 

Answer 1

这可能会这样 - 但我无法测试它，因为你的问题没有提供工作片段。

$( document ).ready( function () {

  var swiper;

  // setting up swiper for the first time on $(document).ready()
  initSwiper();

  // initializing swiper with general attributes
  function initSwiper() {

    swiper = new Swiper( '.swiper-container', {
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    } );

    setSwiper();

  }

  // setting swiper attributes
  function setSwiper() {

    if ( $( window ).width() <= 768 ) {
      swiper.slidesPerView = 'auto';
      swiper.spaceBetween = 10;
      swiper.centeredSlides = true;
    } else if ( $( window ).width() <= 1024 ) {
      swiper.slidesPerView = 3;
      swiper.spaceBetween = 20;
      swiper.centeredSlides = false;
    } else {
      swiper.slidesPerView = 4;
      swiper.spaceBetween = 20;
      swiper.centeredSlides = false;
    }

  }

  // make the swiper responsive
  $( window ).resize( function() {

    setSwiper();

  } );

  $( '[data-ctabtn]' ).on( 'click', function() {
    var idx = $( this ).data( 'ctabtn' );
    $( '.event' + idx + 'back' ).show();
    $( '.event' + idx + 'front' ).remove();
  } );

});