<html> <head> <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css"> <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script> <!-- 覆蓋默認切換效果 為勻速 --> <style> /*插件外層容器 用來定義寬高等其他樣式*/ .swiper-container{ width: 600px; height: 300px; } /*插件的wrapper 這是關鍵， 覆蓋插件默認切換效果為勻速*/ .swiper-wrapper{ transition-timing-function: linear; } </style> </head> <body> <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 class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> </div> </div> <script> var mySwiper = new Swiper ('.swiper-container', { autoplay:1,//自動滾動 loop:true,//循環 speed:5000,//滾動速度 slidesPerView : 4,//slide可見數量 spaceBetween : 10//slide之間的距離（單位px） }) </script> </body> </html>