除非调整页面大小，否则 Swiper 滑块不起作用答案

【问题标题】：Swiper slider not working unless page is resized除非调整页面大小，否则 Swiper 滑块不起作用
【发布时间】：2017-05-03 21:12:45
【问题描述】：

我正在尝试将 Swiper 插件添加到我的页面之一。我想要实现的是在此处集成获取旋转滑块http://idangero.us/swiper/demos/05-slides-per-view.html

HTML

 <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
    </div>

    <div class="swiper-pagination"></div>
    </div>

JS

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    });

当我将它添加到小提琴时它可以工作，但是当我添加到我的 html 页面时，刷卡器在我打开 firebug 或调整页面大小之前不起作用（http://vidznet.com/ng1/swiper/swipe.html）我不确定它在初始化时是否冲突，因为没有控制台中的错误。

花了一些时间后，我认为这可能是一个 jquery 问题并将编码包装在一个

中

pagebeforecreate

 $(document).on( "pagebeforecreate", "#new_",function( event ) {

但还是一样，

我还添加了以下代码

swiper.updateContainerSize();

这应该会更新容器大小，但仍然无法正常工作。

任何帮助将不胜感激。

【问题讨论】：

将observer: true, observeParents: true 添加到配置对象为我解决了这个问题（使用 v4.1.6 的 swiper）
@Isaiahiroko 也为我工作。
不错的收获。有这个问题，但从未注意到调整大小使其工作。

标签： javascript jquery swiper

【解决方案1】：

为了正常工作，Swiper 的滑块需要您：

在它们可见时初始化它们；
在它们可见时更新它们；
启用观察者参数。
- observer: true;
- observeParents: true。

正如 Isaiahiroko 和 Swiper 的创建者（this issue）所说，执行上述主题之一肯定会解决您的问题！

【讨论】：

观察者：是的，解决了我的问题，因为我使用的是 vuejs，并且需要在滑块初始化后获取数据。谢谢。
应该是这里公认的答案，这解决了您在 css 计算中可能遇到的所有更新问题。

【解决方案2】：

我也遇到过这个问题，我认为你应该在 swipper 的 Java Script 中添加两行（参数），

var galleryThumbs = new Swiper('.gallery-thumbs', {
            observer: true,
            observeParents: true,
            loop: true,
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        })

其中 "obeserver : true" 和 "observerParents : true" 是影响您的 swipper 正常工作的参数。这使我的刷机正常工作！希望你能完成！

【讨论】：

@Isaiahiroko 对 OP 的问题发表了评论

【解决方案3】：

使用此代码：

swiper.update();

【讨论】：

在我的例子中，它是基于 React 的应用程序，当可滑动内容首次出现时带有动画，我不得不在 setTimeout 中稍稍延迟调用它

【解决方案4】：

我尝试了下面的代码，它对我有用

var swiper = new Swiper('#upcoming-appointments', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
//<---Add this two lines in your code-->   
       observer: true,  
       observeParents: true,
    });

【讨论】：

【解决方案5】：

你可以试试：

$(window).on({
   load: function(){
      $(this).trigger('resize');
    } 
  });

虽然它有点像胶带解决方案。

【讨论】：

你可以试试 $(window).trigger('resize');在延迟一秒的 setTimeout 函数中？ - 不是作为解决方案，而只是作为测试。我怀疑你这样做与加载序列有关

【解决方案6】：

对于 Angular：

将(swiper)="onSwiper($event)" 添加到您的swiper 组件中。

<swiper (swiper)="onSwiper($event)"></swiper>

并在您的.ts 中添加：

onSwiper(swiper) {
  swiper.update();
}

【讨论】：

【解决方案7】：

对于阅读本文并使用 6.x 版 Swiper 的任何人，您需要导入其他模块（如导航、分页等）以使其工作。

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

【讨论】：

这里是你应该导入的每个模块的列表swiperjs.com/api/#custom-build
即使在最新的 swiper（那是几年）中，同样的错误仍然存在，当一次使用惰性图像和更多图像时，它们不会加载直到调整大小或直到与滑块交互，没有观察者或上面提到的任何东西有效，唯一的办法是使用简单的索引并以正常方式加载前几张图像，其他所有图像以惰性方式。

【解决方案8】：

我有类似的问题，

在我的情况下，添加 rebuildOnUpdate: true 有帮助（如上所述，您可能还需要observer: true）

附言我正在使用 react-id-swiper 和 swiper

【讨论】：

【解决方案9】：

这解决了我的问题

在你的 swiper 初始化中添加这一行

observer: true, observeParents: true,

您的初始化将如下所示

  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    slidesPerView: 3,
    observer: true,
    observeParents: true,
    paginationClickable: true,
    spaceBetween: 30,
    // Navigation arrows
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
});

然后，使用
更新您的 swiper 实例
swiper.update()

【讨论】：

【解决方案10】：

我有类似的问题，就我而言，我将主容器中的类名 swiper-container 替换为 swiper

【讨论】：

【解决方案11】：

只添加

自动播放：{delay:3000,disableOnInteraction:false}

到参数

【讨论】：