swiper的集成

我想將swiper與我的網站集成在一起。雖然我對編程頗爲陌生。我已經將CSS和HTML添加到我的代碼中，但我不確定如何初始化swiper。swiper的集成

我有一個名爲刷卡，common.js項目，該項目包含以下代碼：

var swiper = new Swiper('.swiper-container', { 
      pagination: '.swiper-pagination', 
      paginationClickable: true, 
      autoplay: 3000, 
      loop: true, 
      nextButton: '.swiper-button-next', 
      prevButton: '.swiper-button-prev', 
      paginationBulletRender: function (index, className) { 
       return '<span class="' + className + '"></span>'; 
      } 
     });

我想我需要調用此或將其插入到我出現在我的刷卡主頁。我嘗試添加

<script> 
var swiper = new Swiper('.swiper-container', { 
      pagination: '.swiper-pagination', 
      paginationClickable: true, 
      autoplay: 3000, 
      loop: true, 
      nextButton: '.swiper-button-next', 
      prevButton: '.swiper-button-prev', 
      paginationBulletRender: function (index, className) { 
       return '<span class="' + className + '"></span>'; 
      } 
     }); 
</script>

，但我得到了以下錯誤：的JavaScript運行時錯誤：「組隊，探索」是不確定的。

一切都在代碼別的辦法，即造型和表示，儘管下一個和上一個按鈕都不能正常工作，也不是自動播放

來源

2016-02-11 m_wilson

腳本之前'新Swiper'它試圖創建一個新的實例Swiper的功能。所以你需要有一個Swiper函數，這就是爲什麼你得到運行時錯誤 – Rotan075

我認爲我有這個功能。它包含在一個名爲swiper.jquery.umd.js的JavaScript文件中，並以 var Swiper = function（container，params）if（！（this Swift））返回新Swiper（container，params）; 等等 –

我想我只是不確定溝通的細節在哪裏.. –

，我認爲你應該檢查你的環境的圖像。一個簡單的項目應該是這樣的：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Swiper demo</title> 
<link rel="stylesheet" href="swiper.min.css"> 

</head> 
<body> 

<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide">Slide 1</div> 
     <div class="swiper-slide">Slide 2</div> 
    </div>  
    <div class="swiper-pagination"></div>  
    <div class="swiper-button-next"></div> 
    <div class="swiper-button-prev"></div> 
</div> 

<script src="swiper.min.js"></script> <!-- Important: This should be first when running below script--> 

<script> 
    var swiper = new Swiper('.swiper-container', { 
     pagination: '.swiper-pagination', 
     paginationClickable: true, 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev', 
     spaceBetween: 30 
    }); 
    </script> 
</body> 
</html>

請記住，你需要，只要你說包括swiper.min.js您運行的new Swiper

來源

2016-02-11 10:25:38 Rotan075

回答

相關問題