使用Swiper時無法執行getComputedStyle

我在idangerous的jQuery版本中使用swiper。我加載與require.js這樣的初始化：使用Swiper時無法執行getComputedStyle

define(['jquery','swiper'],function($){ 
 
    $(document).ready(function() { 
 
    var mySwiper = new Swiper ('.swiper-container', { 
 
     // Optional parameters 
 
     direction: 'horizontal', 
 
     loop: true, 
 
     speed:100, 
 

 
     // If we need pagination 
 
     // Navigation arrows 
 
     nextButton: '.m-stage-button-next', 
 
     prevButton: '.m-stage-button-prev', 
 

 
    }); 
 
    }); 
 
});

<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container"> 
 
     <div class="m-stage-slide swiper-slide"> 
 

 
      <a href="#"> 
 
       <img class="m-stage-slide-image" src="../img/slide1.jpg" alt=""> 
 
\t \t \t \t \t \t </a> 
 
      <div class="m-stage-slide-content"> 
 

 
       <div class="m-stage-slide-text"> 
 
        <h1 class="m-stage-slide-heading">{{sContent.headline}}</h1> 
 
        <span class="m-stage-slide-tagline">{{sContent.text}}</span> 
 
       </div> 
 
       <span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span> 
 
      </div> 
 

 
     </div> 
 
\t \t \t \t <div class="m-stage-slide swiper-slide"> 
 

 
      <a href="#"> 
 
       <img class="m-stage-slide-image" src="../img/slide2.jpg" alt=""> 
 
\t \t \t \t \t \t </a> 
 
      <div class="m-stage-slide-content"> 
 

 
       <div class="m-stage-slide-text"> 
 
        <h1 class="m-stage-slide-heading">{{sContent.headline}}</h1> 
 
        <span class="m-stage-slide-tagline">{{sContent.text}}</span> 
 
       </div> 
 
       <span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span> 
 
      </div> 
 

 
     </div> 
 
\t \t \t \t <div class="m-stage-button-prev"></div> 
 
\t \t \t \t <div class="m-stage-button-next"></div> 
 
    \t </div>

（那些{{}} thingis是正確的，現在只是佔位符）

一切都被加載和渲染罰款，但當我嘗試滑動時，我得到

未捕獲TypeError：未能在'Window'上執行'getComputedStyle'：參數1不是'Element'類型

任何提示？

來源

2015-06-24 Myghty

我不完全知道，失敗是什麼。我切換到Swiper 2.7.x，這沒有任何問題。

似乎Swiper 3.x和Require with almond目前有一些問題。

來源

2015-06-24 09:32:56 Myghty

您是否將類.swiper-wrapper添加到了標記中？另見https://github.com/nolimits4web/Swiper/issues/1173#issuecomment-84374654 – skndstry

取而代之的是：

<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container"> 
</div>

嘗試分離出你的DIV的，與外面的刷卡容器：

<div style="width: auto; height: 300px;" class="swiper-container"> 
    <div class="swiper-wrapper"></div> 
</div>

檢查快速入門指南（3點）用於的一個例子正確的HTML標記SwiperJS：

http://www.idangero.us/swiper/get-started/

<!-- Slider main container --> 
<div class="swiper-container"> 

    <!-- Additional required wrapper --> 
    <div class="swiper-wrapper"> 

     <!-- Slides --> 
     <div class="swiper-slide">Slide 1</div> 
     <div class="swiper-slide">Slide 2</div> 
     <div class="swiper-slide">Slide 3</div> 

    </div> 

    <!-- If we need pagination --> 
    <div class="swiper-pagination"></div> 

    <!-- If we need navigation buttons --> 
    <div class="swiper-button-prev"></div> 
    <div class="swiper-button-next"></div> 

    <!-- If we need scrollbar --> 
    <div class="swiper-scrollbar"></div> 

</div>

來源

2016-01-25 15:07:52

適合我，謝謝:) – Bayu

我在Angular 1.5應用程序中使用idangerous中的swiper。使用鼠標滑動幻燈片時出現同樣的錯誤，通過單擊箭頭更改幻燈片時不會出現錯誤。對我來說這是一個計時問題。我通過將swiper var mySwiper = new Swiper('.swiper-container', {...的init移動到視圖完成渲染的位置來解決此問題。

來源

2017-04-21 22:37:03 wojjas

使用Swiper時無法執行getComputedStyle

回答

相關問題