swiper (輪播圖) 外掛的使用
阿新 • • 發佈:2018-12-15
<link rel="stylesheet" href="./swiper-4.4.1/dist/css/swiper.min.css">
<script src="./swiper-4.4.1/dist/js/swiper.min.js"></script>
2.html結構
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="javascript:"> <img src="./images/l1.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="javascript:"> <img src="./images/l2.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="javascript:"> <img src="./images/l3.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="javascript:"> <img src="./images/l4.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="javascript:"> <img src="./images/l5.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="javascript:"> <img src="./images/l6.jpg" alt=""> </a> </div> </div> <!-- 如果需要導航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-pagination"></div> </div>
3.js程式碼
<script> var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', // 垂直切換選項 loop: true, // 迴圈模式選項 // 如果需要前進後退按鈕 //控制左右按鈕 navigation: { nextEl: '.swiper-button-next',//對應左邊按鈕類名 prevEl: '.swiper-button-prev',//對應右邊按鈕類名 }, //自動輪播 autoplay: { delay: 3000, //控制時間 disableOnInteraction: true, disableOnInteraction: false, }, effect: 'coverflow', //控制翻滾動效 pagination: { el: '.swiper-pagination', //點標記 dynamicBullets: true, dynamicMainBullets: 2 }, }) </script>