JavaScript Swiper插件
Swiper开发文档
一款免费以及轻量级的移动设备触控滑块的js框架
初始化Swiper实例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', { });
script>
body>
html>
环路及自动切换
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical', // 垂直切换选项; 默认为水平切换
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false
})
script>
body>
html>
切换时间和切换方向
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
// autoplay: true, //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
autoplay:{ //当值为对象时，表示自动切换
delay:1000, //自动切换的时间间隔（单位:ms）
reverseDirection:true, //开启反向自动切换
},
//direction: "vertical", //Slide的切换方向，默认为水平方向；水平：horizontal、垂直：vertical
speed:2000, //自动切换过程时间（单位:ms）
})
script>
body>
html>
常用配置项
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
//-----------常用配置项---------------------
initialSlide:1, //设置初始化时，slide的索引，默认为0（开始时从哪个开始）
grabCursor:true, //光标变成手型，默认为false
//------------------------------------------
})
script>
body>
html>
切换效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
// -------------slide的切换效果---------------------
// effect:'slide', //位移切换效果
// effect:'fade', //淡入淡出效果
// effect:"cube", //立方体切换效果
// effect:'coverflow', //3D流切换效果
effect:'flip', //3D翻转切换效果
})
script>
body>
html>
设置分页器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
/* 分页器样式 */
.swiper-container{
/* 两种都可以 */
--swiper-theme-color: #ff6600;
--swiper-pagination-color: #00ff33;
}
/* 设置小圆点大小 */
.swiper-pagination-bullet{
width: 10px;
height: 10px;
}
/* 切换时的效果 */
.swiper-pagination-bullet-active{
width: 20px;
height: 10px;
border-radius: 5px;
}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
<div class="swiper-pagination">div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
// -------------设置分页器---------------------
pagination: { //分页器配置项
el: '.swiper-pagination', //分页器容器的css选择器
},
})
script>
body>
html>
设置分页器在容器外面样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 20px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
/* 分页器样式 */
.swiper-container{
/* 两种都可以 */
--swiper-theme-color: #ff6600;
--swiper-pagination-color: #00ff33;
}
/* 分页器放在容器外面样式设置 */
#pag{
height: 30px; position: relative;;
}
#pag .swiper-pagination{
left: 50%; transform: translateX(-50%);
}
#pag .swiper-pagination-bullet{
width: 20px; height: 20px;
margin-left: 10px; border-radius: 0;
}
#pag .swiper-pagination-bullet-active{
background-color: orange;
}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
div>
<div id="pag">
<div class="swiper-pagination">div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
// -------------设置分页器---------------------
pagination: { //分页器配置项
el: '.swiper-pagination', //分页器容器的css选择器
},
})
script>
body>
html>
设置分页器类型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
/* 分页器样式 */
.swiper-container{
/* 两种都可以 */
--swiper-theme-color: #ff6600;
--swiper-pagination-color: #00ff33;
color: #fff;
}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
<div class="swiper-pagination">div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
// -------------设置分页器---------------------
pagination: { //分页器配置项
el: '.swiper-pagination', //分页器容器的css选择器
// 分页器类型设置
type:'bullets', //默认值：小圆点
type:'fraction', //分数式
type:'progressbar' //进度条
},
})
script>
body>
html>
分页器控制切换
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
.swiper-pagination-bullet{
width: 20px; height: 20px;
background-color: #fff;
}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
<div class="swiper-pagination">div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
// -------------设置分页器---------------------
pagination: { //分页器配置项
el: '.swiper-pagination', //分页器容器的css选择器
// 分页器控制切换
clickable:true, //为true时点击分页器指示点控制Swiper切换
clickable:false, //默认为：false（不控制切换）
},
})
script>
body>
html>
前进后退按钮
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
/* 设置前进后退按钮样式 */
.swiper-container{
--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 30px;/* 设置按钮大小 */
}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
<div class="swiper-button-prev">div>
<div class="swiper-button-next">div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
// -------------前进后退按钮---------------------
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
script>
body>
html>
设置滚动条
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
/* 改变滚动条样式 */
.swiper-scrollbar-drag{
background-color: #fff;
}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
<div class="swiper-scrollbar">div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false; 值可以是布尔值，也可以是对象
// -------------滚动条配置项---------------------
scrollbar: {
el: '.swiper-scrollbar',
//hide:true, //让滚动条隐藏，滚动的时候才显示；默认为false：显示
// draggable:true, //是否允许拖动滚动条切换；默认为false：不允许
dragSize:200, //设置滚动条尺寸，默认是auto，可以使用像素数值设置
},
})
script>
body>
html>
触发停止或开始自动切换
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">Slide 1div>
<div class="swiper-slide sd2">Slide 2div>
<div class="swiper-slide sd3">Slide 3div>
div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false;
});
// -------------触发停止或开始自动切换---------------------
var swp = document.getElementById("box1");
swp.onmouseenter = function(){
// 鼠标移入停止自动切换
mySwiper.autoplay.stop();
};
swp.onmouseleave = function(){
// 鼠标移出开始自动切换
mySwiper.autoplay.start();
};
script>
body>
html>
触摸时触发链接跳转
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
#box1 .sd1{background-color: #ff0000;}
#box1 .sd2{background-color: #00ff00;}
#box1 .sd3{background-color: #0000ff;}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1">
<a href="https://blog.csdn.net/UserPython" style="display:block; width: 600px; height: 300px;">Slide 1a>
div>
<div class="swiper-slide sd2">
<a href="https://blog.csdn.net/UserPython" style="display:block; width: 600px; height: 300px;">Slide 2a>
div>
<div class="swiper-slide sd3">
<a href="https://blog.csdn.net/UserPython" style="display:block; width: 600px; height: 300px;">Slide 3a>
div>
div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false;
// -------------触摸时触发链接跳转---------------------
preventClicks:false //设置触摸时是否跳转；默认为true(不跳转)
});
script>
body>
html>
网格分布
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
#box1 .sd1, #box1 .sd2, #box1 .sd3{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide sd1" style="background-color: aqua;">Slide 1div>
<div class="swiper-slide sd2" style="background-color: bisque;">Slide 2div>
<div class="swiper-slide sd3" style="background-color: chartreuse;">Slide 3div>
<div class="swiper-slide sd1" style="background-color: magenta;">Slide 4div>
<div class="swiper-slide sd2" style="background-color: khaki;">Slide 5div>
<div class="swiper-slide sd3" style="background-color: seagreen;">Slide 6div>
div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项; 默认为false
autoplay: true, //开启启动切换; 默认为false;
// -------------网格分布---------------------
slidesPerView:2, //一行同时显示的slide数量
slidesPerGroup:2, //同时切换的slide数量
spaceBetween:20, //设置slide之间间隔，默认为像素，也可以设置成百分比（百分比时按container的百分比）
});
script>
body>
html>
多行多列网格布局
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
border: 1px solid black;
}
.swiper-slide{
line-height: 140px; text-align: center;
font-size: 50px; color: #fff;
height: 140px;
}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: aqua;">Slide 1div>
<div class="swiper-slide" style="background-color: bisque;">Slide 2div>
<div class="swiper-slide" style="background-color: chartreuse;">Slide 3div>
<div class="swiper-slide" style="background-color: magenta;">Slide 4div>
<div class="swiper-slide" style="background-color: khaki;">Slide 5div>
<div class="swiper-slide" style="background-color: seagreen;">Slide 6div>
<div class="swiper-slide" style="background-color: aqua;">Slide 7div>
<div class="swiper-slide" style="background-color: bisque;">Slide 8div>
<div class="swiper-slide" style="background-color: chartreuse;">Slide 9div>
<div class="swiper-slide" style="background-color: khaki;">Slide 0div>
div>
div>
<script>
// 初始化Swiper实例：new Swiper(swiper容器, 个性化配置)
var mySwiper = new Swiper ('.swiper-container', {
autoplay:true,
// -------------网格分布---------------------
// 多行多列布局时，container和slide应设置高度
// 不能使用loop模式
slidesPerView:3, //一行同时显示的slide数量
slidesPerColumn:2, //一列同时显示的slide数量
slidesPerColumnFill:'row', //设置slide排列方式，row：横向，column：纵向
spaceBetween:20, //设置slide之间间隔，默认为像素，也可以设置成百分比（百分比时按container的百分比）
});
script>
body>
html>
swiper动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./swiper.min.css">
<link rel="stylesheet" href="./animate.min.css">
<script src="./js/jquery-3.4.1.min.js">script>
<script src="./js/swiper.min.js">script>
<script src='./js/swiper.animate1.0.3.min.js'>script>
<style type="text/css">
#box1{
width: 600px; height: 300px;
margin: 50px auto;
}
.swiper-slide{
line-height: 300px; text-align: center;
font-size: 50px; color: #fff;
}
style>
head>
<body>
<div class="swiper-container" id="box1">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: aqua;">
<p class="ani" swiper-animate-effect='fadeInLeft' swiper-animate-duration='2s'>Slide 1p>
div>
<div class="swiper-slide" style="background-color: bisque;">
<p class="ani" swiper-animate-effect='pulse' swiper-animate-duration='1s'>Slide 2p>
div>
<div class="swiper-slide" style="background-color: chartreuse;">
<p class="ani" swiper-animate-effect='swing' swiper-animate-delay='0.3s'>Slide 3p>
div>
div>
div>
<script>
// 使用swiper动画的方法
// 注意：对行级元素无效，需转成块级或行内块级元素
// 1. 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。
// 2. 初始化时隐藏元素并在需要的时刻开始动画。
var mySwiper = new Swiper ('.swiper-container', {
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
}
}
});
/*
3. 在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
*/
script>
body>
html>