css引用連接css
http://static.kaiba315.com/swiper.min.css
js引用連接html
http://static.kaiba315.com/swiper.jquery.min.js
此插件基於jQuery插件使用。 Swiper中文網jquery
1,html內容app
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 若是須要分頁器 --> <div class="swiper-pagination"></div> <!-- 若是須要導航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 若是須要滾動條 --> <div class="swiper-scrollbar"></div> </div>
2,初始化Swiper:最好是挨着</body>標籤ide
<script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', loop: true, // 若是須要分頁器 pagination: '.swiper-pagination', // 若是須要前進後退按鈕 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 若是須要滾動條 scrollbar: '.swiper-scrollbar', }) </script> </body>