Swiper一款好用(yòng)的(de)滑動特效插件
swiper基本使用(yòng)
swiper基本使用(yòng)
一、什(shén)麽是swiper
Swiper是純javascript打造的(de)滑動特效插件，面向PC、平闆電腦(nǎo)等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換等常用(yòng)效果。
Swiper開源、免費、穩定、使用(yòng)簡單、功能強大(dà)，是架構移動終端網站的(de)重要選擇！
二、swiper如何使用(yòng):
1、引入swiper對(duì)應的(de)css和(hé)js文件
2、按照(zhào)框架的(de)需求搭建三層結構(div裏面也(yě)可(kě)以是ul等别的(de)元素)
3、創建一個(gè)Swiper對(duì)象, 将容器元素傳遞給它
// 1.引入swiper對(duì)應的(de)css和(hé)js文件
<link rel="stylesheet" href="css/swiper.css"> <script src="js/swiper.js"></script>
// 2.按照(zhào)框架的(de)需求搭建三層結構
<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.創建一個(gè)Swiper對(duì)象, 将容器元素傳遞給它
<script> var mySwiper = new Swiper ('.swiper-container'); </script>
<link rel="stylesheet" href="css/swiper.css"> <script src="js/swiper.js"></script>
// 2.按照(zhào)框架的(de)需求搭建三層結構
<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.創建一個(gè)Swiper對(duì)象, 将容器元素傳遞給它
<script> var mySwiper = new Swiper ('.swiper-container'); </script>