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

這是應該更新容器大小，但仍然無法正常工作。

任何幫助將不勝感激。

來源

2017-05-03 LiveEn

你可以嘗試：

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

雖然這是一個有點stickytape解決方案。

來源

2017-05-03 22:55:22 Sam0

似乎並不奏效:( – LiveEn

你可以嘗試$（窗口）.trigger（「調整」）;用一秒鐘的延遲setTimeout函數 - 不是一個解決方案，但只是一個測試，我懷疑你是這樣做的，這是與加載序列 – Sam0

使用此代碼：

swiper.update();

來源

2017-07-18 18:43:41

Swiper滑塊不工作，除非頁面調整大小

回答

相關問題