02-Swiper初體驗 · Swiper

# **基本使用** 1.下載和引入插件。swiper.min.js和swiper.min.css文件。可下載[Swiper文件](https://www.swiper.com.cn/download/index.html#file1)或使用[CDN](https://www.swiper.com.cn/cdn/index.html)。 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <link rel="stylesheet" href="css/swiper.min.css"> </head> <body> <script src="js/swiper.min.js"></script> </body> </html> ``` 2.添加HTML內容 ``` <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> ``` 3.設置樣式。不添加的話，默認等于父容器的寬度，高度為內容高度 ``` <style> *{padding: 0; margin: 0; border: 0; list-style: none;} .swiper-container{width: 600px; height: 400px; background:pink; margin:100px auto;} </style> ``` 4.初始化Swiper ``` //js寫法 <script> window.onload = function(){ var swiper = new Swiper('.swiper-container'); } </script> //zepto和jquery寫法 <script> $(function(){ var swiper = new Swiper('.swiper-container'); }) </script> ``` **以下均為js寫法**