jQuery：Swiper_代码007(未授权)

本文介绍: Swi per 开源、免费强大的触摸滑动插件官网地址Swi per 使⽤⽅法首先加载插件，需要用到的文件有swiper–bundle.min.js和swiper–bundle.min.css⽂件，不同Swi per 版本用到的文件名略有不同。可下载Swi per 文件或使用CDN。<!DOCTYPE html&g t;<html><head> … <link rel=”styles he et” href=”dist/css/swiper–bundle.min.cs

开源、免费强大的触摸滑动插件官网地址

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
 ...
 <link rel="stylesheet" href="dist/css/swiper-bundle.min.css"&gt;
</head&gt;
<body>
 ...
 <script src="dist/js/swiper-bundle.min.js"></script>
 ...
</body>
</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 class="swiper-pagination"></div>
 
 <!-- 如果需要导航按钮 -->
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
 
 <!-- 如果需要滚动条 -->
 <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

.swiper-container {
 width: 600px;
 height: 300px;
}

4.初始化Swip er

var mySwiper = new Swiper ('.swiper-container', {
 direction: 'vertical', // 垂直切换选项
 loop: true, // 循环模式选项
 
 // 如果需要分⻚器
 pagination: {
 el: '.swiper-pagination',
 },
 
 // 如果需要前进后退按钮
 navigation: {
 nextEl: '.swiper-button-next',
 prevEl: '.swiper-button-prev',
 },
 
 // 如果需要滚动条
 scrollbar: {
 el: '.swiper-scrollbar',
 },
})

完成。恭喜你，现在你的Swiper应该已经能正常切换了。

Swiper Animate是Swiper中⽂⽹提供的⽤于在Swiper内快速制作CSS3动画效果的⼩插件，适⽤于Swiper2.x、Swiper3.x、Swiper4.x和Swiper5.x 。

1.使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。

<!DOCTYPE html>
<html>
<head>
 ...
 <link rel="stylesheet" href="path/to/swiper.min.css">
 <link rel="stylesheet" href="path/to/animate.min.css">
</head>
<body>
 ...
 <script src="path/to/swiper.min.js"></script>
 <script src="path/to/swiper.animate.min.js"></script>
</body>
</html>

2.初始化时隐藏元素并在需要的时刻开始动画。

//Swiper5
var mySwiper = new Swiper ('.swiper-container', {
 on:{
 init: function(){
 AnimateCache(this); //隐藏动画元素
 swiperAnimate(this); //初始化完成开始动画
 }, 
 slideChangeTransitionEnd: function(){ 
 swiperAnimate(this); //每个slide切换结束时也运⾏当前slide动画
 
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展
现⼀次，去除ani类名
 } 
 }
})

<div class="swiper-slide">
 <p class="ani" swiper-animate-effect="fadeInUp" swiper-animateduration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Swi per

Swi per 使⽤⽅法

Swiper Animate使⽤⽅法

发表回复取消回复

Swiper

Swiper 使⽤⽅法

Swiper Animate使⽤⽅法

相关文章

发表回复 取消回复

Swi per

Swi per 使⽤⽅法

发表回复取消回复