Вызовите команду Jquery на другом устройстве - PullRequest
Новая
       15

Вызовите команду Jquery на другом устройстве

0 голосов
/ 05 апреля 2019

У меня возникла проблема с демонстрацией Swiper в карусели событий, которую я сделал при использовании мобильного устройства. Похоже, что функция смахивания не перемещается в правильном порядке изображений, когда на мобильном телефоне. Я думаю, что перепутал, как я вызываю 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();
 });
});

1 Ответ

0 голосов
/ 05 апреля 2019

Это может сделать это, но я не смог проверить это, так как нет вашего рабочего фрагмента с вашим вопросом. 

$( 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();
  } );

});
...