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写法**