除非重新调整页面大小，否则Swiper滑块无法工作 [英] Swiper slider not working unless page is resized

问题描述

我正在尝试将 Swiper 插件添加到我的某个页面。我想要实现的是整合将carousal滑块放在这里 http：/ /idangero.us/swiper/demos/05-slides-per-view.html

Im trying to add the Swiper plugin to one of my page. What im trying to achieve is to integrate get the carousal slider over here 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 ）我不确定它在初始化时是否有冲突因为控制台中没有错误。

When i add it to a fiddle it works but when i add to my html page, the swiper doesnt work until i open firebug or resize the page (http://vidznet.com/ng1/swiper/swipe.html) Im not sure if its conflicting when initializing because There are no errors in the console.

花了一些时间后我觉得它可能是一个jquery问题并将编码包装在一个

After spending some time I thought it might be a jquery issue and wrapped the coding inside a

pagebeforecreate

pagebeforecreate

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

但仍然相同，

我还添加了以下代码

swiper.updateContainerSize();

这是假设更新容器大小，但仍无法正常工作。

which is supposed to update the container size, but still not working.

我们非常感谢任何帮助。

Any help will be much appreciated.

推荐答案

使用此代码：

swiper.update();

这篇关于除非重新调整页面大小，否则Swiper滑块无法工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！