輪播圖的實現
阿新 • • 發佈：2021-12-09
首先我們新建一個資料夾名為lunbotu1在它下面新建三個資料夾分別名為js css img 和index.html
如圖所示
然後我們開啟命令列輸入以下程式碼
npm init -y 初始化命令
npm i [email protected] 下載4.0.1版本的swiper
如圖所示
然後我們編寫html程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style></style> </head> <!--Swiper5/Swiper4，要將5.x.x改成相應的版本，如5.4.5或4.5.1版本（4無esm的CDN）--> <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.css">--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script> <!--min--> <body> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./img/01.jpg" alt=""></div> <div class="swiper-slide"><img src="./img/02.jpg" alt=""></div> <div class="swiper-slide"><img src="./img/03.jpg" alt=""></div> </div> </div> <script> var mySwiper = new Swiper('.swiper', { autoplay: true,//可選選項，自動滑動 }) </script> </body> </html> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.js"></script>--> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.esm.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
首先我們鏈入下載好的swiper.min.js
script程式碼如下
var mySwiper = new Swiper('.swiper', {
autoplay: true,//可選選項，自動滑動
})
介面效果如下