0

我有一个基于 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 调用或检测到它被调用并销毁它？

4

4 回答 4

0

解决方案是检查 swiper typeof 是否未定义。

// 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');
      }
    }
  })
于 2015-02-05T10:01:08.113 回答
0

创建一个仅在图像超过/低于给定宽度时触发一次的函数，并相应地创建和销毁 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();
        }
    });
});
于 2014-02-08T15:49:49.907 回答
0

文档显示有一个resizeReInit选项，它将自动重新初始化 $(window).resize 上的滑块。您可能可以使用它，而不是编写自己的调整大小事件。

在查看文档时，它看起来并不支持任何类型的禁用或破坏，这很奇怪。当浏览器宽度不符合要求时，您可能必须手动隐藏/删除和显示/创建。

于 2014-02-08T15:37:13.483 回答
0

只需基于百分比的宽度，swiper-container插件就会将其拾取并自行做出反应..

您可能需要添加选项calculateHeight:true

于 2014-02-08T15:34:32.780 回答