Swiper一款好用的滑动特效插件
swiper基本使用
swiper基本使用
一、什么是swiper
Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
二、swiper如何使用:
1、引入swiper对应的css和js文件
2、按照框架的需求搭建三层结构(div里面也可以是ul等别的元素)
3、创建一个Swiper对象, 将容器元素传递给它
// 1.引入swiper对应的css和js文件
<link rel="stylesheet" href="css/swiper.css"> <script src="js/swiper.js"></script>
// 2.按照框架的需求搭建三层结构
<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.创建一个Swiper对象, 将容器元素传递给它
<script> var mySwiper = new Swiper ('.swiper-container'); </script>
<link rel="stylesheet" href="css/swiper.css"> <script src="js/swiper.js"></script>
// 2.按照框架的需求搭建三层结构
<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.创建一个Swiper对象, 将容器元素传递给它
<script> var mySwiper = new Swiper ('.swiper-container'); </script>