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

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

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

這次帶給大家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中文網其它相關文章!

推薦閱讀:

應該如何建立webpack react開發環境

如何建立React全家桶環境

以上是Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn