Swiper滑块未能工作，除非调整页面大小

Question

我正在尝试将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

JavaScript

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',
});

当我将它添加到 JSFiddle 上时它可以工作，但是当我添加到我的 HTML 页面时，轮播图在我打开 Firebug 或调整页面大小之前都无法正常工作 (http://vidznet.com/ng1/swiper/swipe.html)。我不确定在初始化时是否存在冲突，因为控制台中没有错误。经过一段时间的研究后，我认为可能是一个 jQuery 问题，并将代码放到了

pagebeforecreate

里。

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

但仍然是相同的，

我还添加了下面的代码

swiper.updateContainerSize();

该更新容器大小的代码似乎仍然无效。

非常感谢您的任何帮助。

- LiveEn

---

将 observer: true, observeParents: true 添加到配置对象中，解决了我的问题（使用 Swiper 的 v4.1.6 版本）。 - Isaiahiroko

@Isaiahiroko 对我也起作用了。 - Matt

不错的发现。我也遇到过这个问题，但从未注意到调整大小可以解决它。 - Shalin Nipuna

Answer 1

为了使Swiper的轮播图正常工作，您需要执行以下操作之一：

• 在轮播图可见时初始化它们
• 在轮播图可见时更新它们
• 启用观察器参数
  • observer: true
  • observeParents: true

根据@Isaiahiroko和Swiper的创建者（在此问题中），执行上述任何一个方法都可以解决您的问题！

- user6794421

---

观察者（Observer）设置为True，解决了我的问题。因为我使用的是VueJs，在滑块初始化后需要获取数据。谢谢。 - user7153178

这应该是被接受的答案，它解决了你在 CSS 计算中可能遇到的所有更新问题。 - rx2347

Answer 2

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

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”是影响您的轮播正常工作的参数。这使我的轮播器正常工作！希望你也能做到！

- Adarsh Bhalani

---

@Isaiahiroko 在原帖问题下发表了评论。 - Zmart

Answer 3

使用此代码：

swiper.update();

- Nechemya Kanelsky

---

在我的情况下，这是一个基于React的应用程序，在可滑动内容第一次出现时需要进行动画处理，我不得不在setTimeout中加入小延迟来调用它。 - amankkg

Answer 4

对于 Angular：

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

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

并在您的.ts文件中添加：

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

- Zahema

Answer 5

这解决了我的问题。

1. Add this lines in your swiper initialization

   observer: true, observeParents: true,

   your initialization will look like this

     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',
   });
   

2. Then, update your swiper instance with

   swiper.update()

- Gustave Tsopmo

Answer 6

我尝试了以下代码，它对我有效。我的swiper位于选项卡内，当文档加载时，swiper无法正常工作，除非我调整屏幕大小。因此，我尝试了以下代码，它有效。

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,
    });

- Omkar

Answer 7

我遇到了类似的问题， 在我的情况下，我将主容器中的类名swiper-container替换为swiper

- Arshad Khan

---

哇，我简直不敢相信我会被这个愚蠢的错误困住。谢谢你！ - undefined

Answer 8

你可以尝试使用：

：

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

尽管这有点像一个临时解决方案，但它仍然保留了HTML格式。

- Sam0

---

你能否在 setTimeout 函数中延迟一秒钟后尝试 $(window).trigger('resize');？仅作为测试而非解决方案。我怀疑跟加载顺序有关。 - Sam0

Answer 9

我曾经遇到过类似的问题，

在我的情况下，添加 rebuildOnUpdate: true 有所帮助 （你可能还需要像上面提到的那样添加 observer: true）

p.s. 我正在使用 react-id-swiper 和 swiper

- Anastasia Plaskevich

Answer 10

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

// 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(...);

- daveaspinall

---

这里是您需要导入的每个模块列表 https://swiperjs.com/api/#custom-build - Raphaël Balet

即使在最新版本的Swiper（已经有几年了），仍然存在同样的bug，当使用lazy和一次加载更多的图像时，它们不会在调整大小或与滑块的交互之前加载。没有提到任何观察器或类似的东西可以解决这个问题，唯一的解决方法是使用简单的索引，在正常方式下加载前几张图片，其余的采用lazy方式加载。 - Jiro Matchonson