Swiper插件的基本使用方法和案例

一、Swiper是什么？

Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

二、Swiper使用的步骤

步骤一、点我进入Swiper官网，下载Swiper animate 动画js和Swiper animate 动画CSS

如果安装了Nodejs环境也可以打开编译器终端利用`npm install swiper`下载

步骤二：引入文件

步骤三：HTML和JS的基本内容

步骤四：Swiper动画的初始化，以及animate的初始化


<script>        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',},})        </script>

<script> 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类名} }}) </script>

步骤五、在需要运动的元素上面增加类名ani ，和其他的类似插件相同

Swiper Animate需要指定几个参数

swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

切换效果参考

三、Swiper制作元宵节动画

代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/swiper.min.css"><link rel="stylesheet" href="css/animate.min.css"><style>html,body {height: 100%;}html {font-size: 15.625vw;}body {max-width: 640px;margin: 0 auto;font-size: 14px;}.swiper-container {height: 100%;}.swiper-container,.swiper-slide {background: url(images/bg.jpg) no-repeat;position: relative;}.flower {position: absolute;width: 3.6rem;height: 4.4rem;left: 0;top: 0;}.bg {position: absolute;width: 100%;height: 4rem;top: 50%;left: 0;margin-top: -2rem;}.s1 {position: absolute;width: 1.27rem;height: 2.5rem;right: 0.6rem;top: 50%;margin-top: -1.25rem;}.s2 {position: absolute;width: 2rem;height: 2.4rem;left: 0.6rem;top: 50%;margin-top: -1.2rem;}</style>
</head><body><!-- 全屏的滚动效果 --><div class="swiper-container "><div class="swiper-wrapper"><!--  第一屏效果 --><div class="swiper-slide"><img src="data:images/flower.png" class="flower   ani " swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" alt=""><img src="data:images/s1.png" alt="" class="bg   ani " swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s"><img src="data:images/s1-t1.png" class="s1   ani " swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" alt=""><img src="data:images/s1-t2.png" class="s2   ani " swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" alt=""></div><!--  第二屏效果 --><div class="swiper-slide">Slide 2</div><!--  第三屏效果 --><div class="swiper-slide">Slide 3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><script src="js/swiper.min.js"></script><script src="js/swiper.animate1.0.3.min.js"></script><script>window.onload = function() {var mySwiper = new Swiper('.swiper-container', {direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',},on: { //动画的初始化init: function() {swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画},slideChangeTransitionEnd: function() {swiperAnimate(this); //每个slide切换结束时也运行当前slide动画this.slides.eq(this.activeIndex).find('.ani').removeClass('ani');// 动画只展现一次， 去除ani类名}}})}</script></body></html>

四、基于swiper制作轮播图

轮播图这块，除了ui框架的轮播组件外，用的最多的就swiper了吧！毕竟ui框架中，轮播组件的定制化功能还是比较欠缺的，毕竟不是专业做轮播的。swiper制作轮播图，他是包含背景，并且每一个轮播的图片在动的时候，与背景之间还存在一定的视觉差，这样使轮播图看起来更有层次感和流动感。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/swiper.min.css"><style>.swiper-bg {background: url(images/bc1.jpg) no-repeat 100%;height: 500px;}.swiper-wrapper {position: absolute;top: 0;}.swiper-slide {display: flex;justify-content: center;}</style><script src="js/swiper.min.js"></script>
</head><body><div class="swiper-container"><div class="swiper-bg" data-swiper-parallax="-5%" data-swiper-parallax-duration="1000"></div><div class="swiper-wrapper"><div class="swiper-slide"><img src="data:images/bc1.jpg" /></div><div class="swiper-slide"><img src="data:images/bc1.jpg" /></div><div class="swiper-slide"><img src="data:images/bc1.jpg" /></div></div><div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。--><div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。--><div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。--></div><script>var mySwiper = new Swiper('.swiper-container', {speed: 300,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},pagination: {el: '.swiper-pagination',},loop: true,autoplay: true,clickable: true,})mySwiper.params.pagination.clickable = true;//此外还需要重新初始化paginationmySwiper.pagination.destroy()mySwiper.pagination.init()mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');</script><script></script>
</body></html>

五、网格分布

五、易企秀制作Swiper动画

Swiper插件的基本使用方法和案例相关推荐

JS9day(BOM对象模型,setTimeout定时器，JS单线程执行机制，location对象，swiper插件，localStorage本地存储，购物车案例升级版，学习信息案例（本地存储）)
文章目录 BOM简介定时器-延时函数 5秒关闭广告案例递归模拟setInterval函数两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...
vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
移动端黑马面面案例（技术方案，代码规范，目录规范，蓝湖/摹客协作平台，适配方案简介，初始化文件，swiper插件使用，index.html，index.less，index.css）
由于水平太菜了,跟着做案例都没做好,一堆的bug,但是不发布觉得有点可惜,就这样吧移动端黑马面面案例技术方案代码规范目录规范蓝湖/摹客协作平台适配方案简介初始化文件 swiper插件使用 ...
Swiper插件使用方法
Swiper插件的简单使用 Swiper插件是用来写轮播图的插件,十分简洁方便.可以直接去Swiper官网下载并点击开始使用Swiper按钮查看使用方法,这里只介绍简单引用的方法. 本文所写内容在官网 ...
【react开发】使用swiper插件，loop:true时产生的问题解决方案
这2天上班遇到的问题:react使用swiper3插件实现banner轮播,其中有个banner图有个click点击事件,而其他的是页面跳转.出现了一个问题: 就是向右滑动到该帧时的swiper,点击 ...
PC端和移动端网页特效，fastclick插件，Swiper插件，Bootstrap等框架，本地存储
目录 PC 端网页特效元素偏移量 offset 系列 1.offset 系列常用属性 2.offset 与 style 区别 3.计算鼠标在盒子内的坐标 4.模态框拖拽 5.京东商品放大镜元素可视 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
vue 结合swiper插件实现广告公告上下滚动的效果
最近做到的项目里面需要广告公告上下滚动,网上也找了很多例子,效果总是不理想,所以就想着利用轮播图的竖直方向的滚动来实现这个效果一.在项目里面安装swiper插件通过npm安装: npm insta ...

Swiper插件的基本使用方法和案例

Swiper插件的基本使用方法和案例

一、Swiper是什么？

二、Swiper使用的步骤

步骤一、点我进入Swiper官网，下载Swiper animate 动画js和Swiper animate 动画CSS

如果安装了Nodejs环境也可以打开编译器终端利用`npm install swiper`下载

步骤二：引入文件

步骤三：HTML和JS的基本内容

步骤四：Swiper动画的初始化，以及animate的初始化

步骤五、在需要运动的元素上面增加类名ani ，和其他的类似插件相同

切换效果参考

三、Swiper制作元宵节动画

四、基于swiper制作轮播图

五、网格分布

五、易企秀制作Swiper动画

Swiper插件的基本使用方法和案例相关推荐

最新文章

热门文章

Swiper插件的基本使用方法和案例

Swiper插件的基本使用方法和案例

一、Swiper是什么？

二、Swiper使用的步骤

步骤一、点我进入Swiper官网，下载Swiper animate 动画js和Swiper animate 动画CSS

如果安装了Nodejs环境也可以打开编译器终端利用npm install swiper下载

步骤二：引入文件

步骤三：HTML和JS的基本内容

步骤四：Swiper动画的初始化，以及animate的初始化

步骤五、在需要运动的元素上面增加类名ani ，和其他的类似插件相同

切换效果参考

三、Swiper制作元宵节动画

四、基于swiper制作轮播图

五、网格分布

五、易企秀制作Swiper动画

Swiper插件的基本使用方法和案例相关推荐

最新文章

热门文章

如果安装了Nodejs环境也可以打开编译器终端利用`npm install swiper`下载