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

问题描述

限时删除！！

我正在尝试将插件添加到我的某个页面。我想要实现的是整合将carousal滑块放在这里

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或调整页面大小（）我不确定它在初始化时是否有冲突因为控制台中没有错误。

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

 $(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滑块无法工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..