這次帶給大家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中文網其它相關文章!
推薦閱讀:
以上是Swiper 4.x 在行動端中根據內容觸摸滑動功能的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!