Question

我正在尝试将Swiper插件添加到我的某个页面中。我想要实现的是整合将carousal滑块放在这里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页面时，swiper无法工作，直到我打开firebug或调整页面大小（http://vidznet.com/ng1/swiper/swipe.html）我不确定它在初始化时是否有冲突因为那里在控制台中没有错误。

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

中

pagebeforecreate

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

但仍然相同，

我还添加了以下代码

swiper.updateContainerSize();

应该更新容器大小，但仍无效。

非常感谢任何帮助。

Answer 1

我也遇到了这个问题，我认为您应该在swipper的Java脚本中添加两行（参数），

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”是影响您的刷卡器正常工作的参数。这使我的拖鞋正常工作！希望你能完成！

Answer 2

使用此代码：

swiper.update();

Answer 3

你可以尝试：

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

虽然这是一个粘贴的解决方案。

Answer 4

我尝试使用下面的代码对我有用：swiper出现在选项卡中，当我加载文档时，swipper不起作用，除非并且除非我调整屏幕大小，所以我尝试使用下面的代码对我有用

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

Answer 5

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

在可见时初始化它们；
在可见时更新它们；

observer: true;
observeParents: true。

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

Answer 6

对于阅读此书并使用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(...);

Answer 7

我遇到了类似的问题，

就我而言，添加 private void DisableEnableUiTexts(bool uiTextEnabled) { foreach (Text ui in uiTexts) { ui.enabled = uiTextEnabled; } } 有帮助（您可能还需要上面提到的 rebuildOnUpdate: true）

附言我正在与 observer: true 和 react-id-swiper

合作

Answer 8

对于 Angular：

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

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

并在您的 .ts 中添加：

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

除非重新调整页面大小，否则Swiper滑块无法工作

8 个答案: