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

问题描述：

我试图将Swiper插件添加到我的页面之一。什么即时试图实现的是整合获得转盘滑块HTML在这里http://idangero.us/swiper/demos/05-slides-per-view.html Swiper滑块不工作，除非页面调整大小

<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>

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不工作，直到我打开萤火虫或调整页面的大小（http://vidznet.com/ng1/swiper/swipe.html）我不知道当它init时冲突ializing因为控制台中没有错误。

花了一些时间后，我想这可能是一个jQuery问题和包裹

pagebeforecreate

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

，但还是一样的内部编码，

我还添加了下面的代码

swiper.updateContainerSize();

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

任何帮助将不胜感激。

答

你可以尝试：

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

虽然这是一个有点stickytape解决方案。

似乎并不奏效:( – LiveEn

你可以尝试$（窗口）.trigger（“调整”）;用一秒钟的延迟setTimeout函数 - 不是一个解决方案，但只是一个测试，我怀疑你是这样做的，这是与加载序列 – Sam0

答

使用此代码：

swiper.update();

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

相关推荐