首頁 >web前端 >js教程 >Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現

Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現

php中世界最好的语言原創: 2018-05-28 15:46:522239瀏覽

這次帶給大家Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現，Swiper 4.x 在行動端根據內容觸摸滑動實現的注意事項有哪些，下面就是實戰案例，一起來看一下。

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等行動終端。

Swiper能實現觸控螢幕焦點圖、觸控螢幕Tab切換、觸控螢幕多圖切換等常用效果。

Swiper開源、免費、穩定、使用簡單、功能強大，是架構行動終端網站的重要選擇！

1.先載入插件，需要用到的檔案有swiper.min.js和swiper.min.css檔案。可下載Swiper檔案或使用CDN。

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" href="path/to/swiper.min.css" rel="external nofollow" >
</head>
<body>
  ...
  <script src="path/to/swiper.min.js"></script>
</body>
</html>

2.HTML內容。

<p class="swiper-container">
  <p class="swiper-wrapper">
    <p class="swiper-slide">Slide 1</p>
    <p class="swiper-slide">Slide 2</p>
    <p class="swiper-slide">Slide 3</p>
  </p>
  <!-- 如果需要分页器 -->
  <p class="swiper-pagination"></p>
  
  <!-- 如果需要导航按钮 -->
  <p class="swiper-button-prev"></p>
  <p class="swiper-button-next"></p>
  
  <!-- 如果需要滚动条 -->
  <p class="swiper-scrollbar"></p>
</p>
导航等组件可以放在container之外

3.你可能想要為Swiper定義一個大小，當然不要也行。

.swiper-container {
  width: 600px;
  height: 300px;
}

4.初始化Swiper：最好是挨標籤

<script>    
 var mySwiper = new Swiper ('.swiper-container', {
  direction: 'vertical',
  loop: true,
  
  // 如果需要分页器
  pagination: {
   el: '.swiper-pagination',
  },
  
  // 如果需要前进后退按钮
  navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev',
  },
  
  // 如果需要滚动条
  scrollbar: {
   el: '.swiper-scrollbar',
  },
 })    
 </script>
</body>

如果不能寫在HTML內容的後面，則需要在頁面載入完成後再初始化（不推薦）。

<script type="text/javascript">
window.onload = function() {
 ...
}
</script>

或這樣（Jquery和Zepto）

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！