горячий, чтобы включить / выключить вызов jquery в соответствии с шириной браузера

У меня есть адаптивный веб-сайт на основе Wordpress, и я хочу вызвать Swiper в соответствии с к ширине окна браузера. поэтому я написал это:

var browserwidth = 670;
if ($(window).width() < browserwidth) {
  var mySwiper = $('.swiper-container').swiper({
    mode:'horizontal',
    loop: true,
    grabCursor: true,
    paginationClickable: true
  });
}

это работает хорошо, но если пользователь изменяет размер окна, веб-сайт становится немного грязным.

Итак, я написал все это на сайте $(window).resize. это сработало, но произошли две нежелательные вещи:

  1. когда пользователь запускает браузер с < browserwidth и изменяет размер окна до browserwidth, он продолжает перезагружать Swiper, что не так уж и круто.
  2. когда пользователь запускает браузер с < browserwidth и изменяет размер окна за пределы browserwidth, Swiper не «выключается», даже если я использую существующую функцию mySwiper.destroy().

Итак, как я могу включить/выключить вызов jQuery или определить, что он был вызван, и уничтожить его?


javascript jquery swiper
person fksr86    schedule 08.02.2014    source источник
comment
Похоже, вместо этого вы должны использовать медиа-запросы CSS.   -  person A. Wolff    schedule 08.02.2014

Ответы (4)


arrow_upward
0
arrow_downward

Создайте функцию, которая срабатывает только один раз, когда изображение выходит за / под заданную ширину, и соответственно создайте и уничтожьте swiper

jQuery(function($) {
    var fired = [false, false],
        mySwiper;

    $(window).on('resize', function() {
        if ( $(this).width() > 670 && !fired[0]) {
            fired[0] = true;
            fired[1] = false;
            mySwiper = $('.swiper-container').swiper({
                mode:'horizontal',
                loop: true,
                grabCursor: true,
                paginationClickable: true
            });
        }else if ($(this).width() < 670 && !fired[1]) {
            fired[0] = false;
            fired[1] = true;
            mySwiper.destroy();
        }
    });
});
person adeneo    schedule 08.02.2014
comment
Спасибо! это сработало как шарм. за исключением того, что при вызове mySwiper.destroy() отображается ошибка: Uncaught TypeError: Cannot read property 'length' of undefined. я протестировал действие destroy в другом контексте, и оно заканчивается той же ошибкой. возможно, это проблема Swiper. Я попытаюсь выяснить, в чем причина. - person fksr86; 08.02.2014
comment
@ fksr86 fksr86 Как вы сказали, это показывает ошибку. Решение состоит в том, чтобы проверить, является ли тип swiper неопределенным. Я помещаю пример кода в новый ответ ниже. - person Heisenberg; 05.02.2015

arrow_upward
0
arrow_downward

Просто сделайте ширину swiper-container в процентах, и плагин подберет ее и отреагирует самостоятельно.

Возможно, вам придется добавить опцию calculateHeight:true

person Gabriele Petrioli    schedule 08.02.2014

arrow_upward
0
arrow_downward

Документация показывает, что есть опция resizeReInit, которая автоматически повторно инициализирует ползунок на $(window).resize. Вероятно, вы можете использовать это вместо того, чтобы писать собственное событие изменения размера.

При просмотре документации не похоже, что она поддерживает какое-либо отключение или уничтожение, что очень странно. Возможно, вам придется вручную скрывать/удалять и показывать/создавать, когда ширина браузера не соответствует требованиям.

person Bic    schedule 08.02.2014

arrow_upward
0
arrow_downward

Решение состоит в том, чтобы проверить, является ли тип swiper неопределенным.

// SWIPER
  var mySwiper;
  var browserwidth = 670;
  $(window).on('resize', function() {
    if ($(window).width() < browserwidth) {
      if (typeof mySwiper == 'undefined') {
        mySwiper = $('.swiper-container').swiper({
          mode:'horizontal',
          loop: true,
          grabCursor: true,
          paginationClickable: true
        });
      }
    }else ($(window).width() >= browserwidth) {
      if (typeof mySwiper != 'undefined') {
        // destroy and delete swiper object
        mySwiper.destroy();
        mySwiper = undefined;
        // reset styling for wrapper and slides
       $('.swiper-wrapper').removeAttr('style');
        $('.swiper-slide').removeAttr('style');
      }
    }
  })
person Heisenberg    schedule 05.02.2015