【前言】
本文我用Swiper.js来做一些常见的特效案例,关于手机和PC的适配也做了一些处理,在这里分享记录下
效果展示方面可以看我的git,最后发下Demo效果链接
更多实例,可以查看Swiper官方展示http://www.swiper.com.cn/demo/web/index.html
【列表】
(1)基础滑动
(2)按钮切换
(3)分页
(4)分页器 / 动态指示点
(5)进度条指示器
(6)分式指示器
(7)自定义指示器
(8)滚动条
(9)垂直切换
(10)slides之间设置间隔
(11)过渡前执行动画
(12)一页显示多个Slides
(13)自定义slide宽度 / Carousel转盘模式
(14)slides居中
(15)Slides居中 + 自定义Slides宽度
(16)free自由模式 / 不贴合边缘
(17)垂直方向内容滚动
(18)多行slides分布
(19)Swipers嵌套
(20)抓手光标
(21)Loop模式 / 无限循环模式
(22)Loop模式+Slides分组
(23)切换效果
(24)键盘控制
(25)鼠标滚轮控制
(26)自动切换
(27)动态添加Slides
(28)缩略图控制 / Swiper互相控制
(29)缩略图控制 / 无限循环
(30)视差效果
(31)延迟加载图片
(32)响应式设置
(33)虚拟Slides
【主体】
先写出基础页面架构
<div class="swiper-container "> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> </div> </div>
(1)基础滑动
初始化Swiper
var mySwiper = new Swiper('.swiper-container');(2)按钮切换
<div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> //以下为JS代码 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },(3)分页
<div class="swiper-pagination"></div> //以下为JS代码 pagination: {//分页 el: '.swiper-pagination', },(4)分页器 / 动态指示点
pagination: {//分页 el: '.swiper-pagination',//添加分页 dynamicBullets: true,//动态指示点 },(5)进度条指示器
pagination: {//分页 el: '.swiper-pagination',//添加分页 type: 'progressbar',//进度条指示器 },
(6)分式指示器
pagination: {//分页 el: '.swiper-pagination',//添加分页 type: 'fraction',//分式指示器 },
(7)自定义指示器
//css .swiper-pagination-bullet { width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 12px; color: #000; opacity: 1; background: rgba(0,0,0,0.2); } .swiper-pagination-bullet-active { color: #fff; background: #007aff; } //JS代码 pagination: {//分页 el: '.swiper-pagination', clickable: true,//分页指示点可点击 renderBullet: function (index, className) {//分页点加索引 return '<span class="' + className + '">' + (index + 1) + '</span>'; }, },
(8)滚动条
<div class="swiper-scrollbar"></div> //以下为JS代码 scrollbar: { el: '.swiper-scrollbar', hide: true,//控制显示隐藏 },
(9)垂直切换
//CSS代码 #Swiper-first{ width: 100%; height: 300px; overflow-y: hidden; } <!--垂直分页--> <div class="swiper-pagination"></div> //以下为JS代码 direction: 'vertical', pagination: { el: '.swiper-pagination', clickable: true, },
(10)slides之间设置间隔
spaceBetween: 30,//设置slides间隔
(11)过渡前执行动画
①添加类名和参数,在需要运动的元素上面增加类名ani,具体可以参考文章Swiper Animate用法详解
②JS控制显示添加删除
<div class="swiper-container" id="Swiper-one"> <div class="swiper-wrapper"> <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInUp">内容1</p> </div> <div class="swiper-slide"><p> <p class="ani" swiper-animate-effect="fadeInLeft">内容2</p> </div> <div class="swiper-slide"> <p class="ani" swiper-animate-effect="fadeInDown">内容3</p> </div> </div> <div class="swiper-pagination"></div> </div> //JS代码 var mySwiper = new Swiper ('.swiper-container', { on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 } } })
(12)一页显示多个Slides
slidesPerView: 3,
(13)自定义slide宽度 / Carousel转盘模式
//CSS代码 .swiper-slide{ width: 80%; } //JS代码 slidesPerView: 'auto'//开启slide宽度自定义功能(14)slides居中
适用于一页显示多个Slides的幻灯片
slidesPerView: 4,//一页4个 centeredSlides: true,//首个居中(15)Slides居中 + 自定义Slides宽度
slidesPerView: 'auto'//开启slide宽度自定义功能 centeredSlides: true,//首个居中(16)free自由模式 / 不贴合边缘
freeMode: true,(17)垂直方向内容滚动
<!--滚动条--> <div class="swiper-scrollbar"></div> //JS代码 direction: 'vertical', slidesPerView: 'auto',//自定义宽度/高度 freeMode: true,//自由模式 scrollbar: { el: '.swiper-scrollbar', }, mousewheel: true,// 开启鼠标滚轮(18)多行slides分布
//CSS .swiper-container { width: 100%; height: auto; margin-left: auto; margin-right: auto; } //JS代码 slidesPerColumn: 2,//两行(19)Swipers嵌套
<div class="swiper-container" id="Swiper-one"> <div class="swiper-wrapper"> <div class="swiper-slide"> 1 </div> <div class="swiper-slide"> <div class="swiper-container" id="Swiper-two"> <div class="swiper-wrapper"> <div class="swiper-slide">1</div> <div class="swiper-slide">2</div> <div class="swiper-slide">3</div> </div> <div class="swiper-pagination swiper-pagination-v"></div> </div> </div> <div class="swiper-slide"> 3 </div> </div> <div class="swiper-pagination swiper-pagination-h"></div> </div> //JS代码 <script> var swiperH = new Swiper('#Swiper-one', { spaceBetween: 50, pagination: { el: '.swiper-pagination-h', clickable: true, }, }); var swiperV = new Swiper('#Swiper-two', { direction: 'vertical', spaceBetween: 50, pagination: { el: '.swiper-pagination-v', clickable: true, }, }); </script>
(20)抓手光标
grabCursor: true,(21)Loop模式 / 无限循环模式
loop: true,(22)Loop模式+Slides分组
slidesPerView: 3, spaceBetween: 30, slidesPerGroup: 3, loop: true, loopFillGroupWithBlank: true,//在loop模式下,为group填充空白slide(23)切换效果
effect: 'fade',//淡入②3D方块切换
effect:'cube'//方块③3D滚动切换
effect:'coverflow'//3D流
④3D翻转切换
effect:'flip'//翻动
(24)键盘控制
keyboard: { enabled: true,//启用键盘 },
(25)鼠标滚轮控制
mousewheel: true,//开启滚轮
(26)自动切换
autoplay:true, //等同于以下设置 autoplay: { delay: 3000,/延迟300ms stopOnLastSlide: false,//是否停在最后一张 disableOnInteraction: true,//开启交互 },
(27)动态添加Slides
<p class="append-buttons"> <a href="#" class="prepend-2-slides">Prepend 2 Slides</a> <a href="#" class="prepend-slide">Prepend Slide</a> <a href="#" class="append-slide">Append Slide</a> <a href="#" class="append-2-slides">Append 2 Slides</a> </p> //JS代码 var appendNumber = 4; var prependNumber = 1; document.querySelector('.prepend-2-slides').addEventListener('click', function (e) { e.preventDefault(); swiper.prependSlide([ '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>', '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>' ]); }); document.querySelector('.prepend-slide').addEventListener('click', function (e) { e.preventDefault(); swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'); }); document.querySelector('.append-slide').addEventListener('click', function (e) { e.preventDefault(); swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'); }); document.querySelector('.append-2-slides').addEventListener('click', function (e) { e.preventDefault(); swiper.appendSlide([ '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>', '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>' ]); });
(28)缩略图控制 / Swiper互相控制
具体我在文章Swiper缩略图Demo里做了案例
(29)缩略图控制 / 无限循环
经过测试后,发现稳定性较差,存在BUG
(30)视差效果
parallax(视差) 类型:boolean 默认:false
设置为true开启视差效果,效果可以应用于container或slide的子元素
效果列表:
1.视差位移变化
在所需要的元素上增加data-swiper-parallax属性(与Swiper切换方向相同)或data-swiper-parallax-x (x方向) data-swiper-parallax-y(y方向)
data-swiper-parallax接受两种类型的参数
number(单位:px),如-300,从右边300px进入左边出去;
percentage(百分比),移动距离=该元素宽度 * percentage
2.透明度变化data-swiper-parallax-opacity,可选值0-1
3.缩放变化data-swiper-parallax-scale属性
4.持续时间data-swiper-parallax-duration设定视差动画持续时间(ms)
注意:设定透明度或缩放必须同时设定位移,否则无效
案例:
具体我在文章Swiper视差效果Demo里做了案例
(31)延迟加载图片
<div class="swiper-container"> <div class="swiper-wrapper"> <!-- 延迟加载图片的结构 --> <div class="swiper-slide"> <img data-src="path/to/picture-1.jpg" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> <!-- 使用srscet的延迟加载图片的结构(注:2x,2倍分辨率如retina屏幕时加载)--> <div class="swiper-slide"> <img data-src="path/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> <!-- 延迟加载背景图的结构 --> <div class="swiper-slide"> <div data-background="path/to/picture-2.jpg" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> </div> <!-- slide的背景延迟加载 --> <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> </div> </div> <script> var mySwiper = new Swiper('.swiper-container', { lazy: { loadPrevNext: true, }, }); </script>
(32)响应式设置
主要原理是断点设置
breakpoints: { 1024: { slidesPerView: 4, spaceBetween: 40, }, 768: { slidesPerView: 3, spaceBetween: 30, }, 640: { slidesPerView: 2, spaceBetween: 20, }, 320: { slidesPerView: 1, spaceBetween: 10, } }
(33)自动高度
autoHeight: true, //启用自动高度
(34)虚拟Slides
<div class="swiper-pagination"></div> //JS代码 pagination: { el: '.swiper-pagination', type: 'fraction', }, virtual: { slides: (function () { var slides = []; for (var i = 0; i < 600; i += 1) { slides.push('Slide ' + (i + 1)); } return slides; }()), }, document.querySelector('.slide-1').addEventListener('click', function (e) { e.preventDefault(); swiper.slideTo(0, 0); }); document.querySelector('.slide-250').addEventListener('click', function (e) { e.preventDefault(); swiper.slideTo(249, 0); }); document.querySelector('.slide-500').addEventListener('click', function (e) { e.preventDefault(); swiper.slideTo(499, 0); });
(35)可滑动菜单
我在后面文章Swiper滑动菜单Demo里做了总结
.
相关推荐
本Demo是基于Swiper框架,模仿其官方网站的效果进行制作,旨在展示Swiper的多种功能和应用场景。 Swiper的核心特性包括: 1. **触摸滑动**:Swiper支持触屏设备,用户可以通过手指滑动来切换幻灯片,提供流畅的...
【标题】"swiperdemo.zip" 是一个包含有关“VueAwesomeSwiper”组件的示例项目的压缩包文件。这个组件是专门为Vue.js框架设计的一个轮播插件,它基于知名的Swiper库进行了封装,使得在Vue应用中实现各种复杂的轮播...
Swiper的版本2.7.6是其历史版本之一,虽然可能不包含最新的特性,但仍然能满足很多基本需求。 首先,让我们详细了解一下Swiper的核心特点: 1. **多平台支持**:Swiper最初设计用于手机和平板,但也完全兼容桌面...
微信小程序学习demo:视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo:视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo:视图控件View、ScrollView、Swiper(源代码+截图)微信...
在"Swiper-3.0.6.zip"这个压缩包中,包含了Swiper 3.0.6版本的各种DEMO,供开发者参考和学习。 Swiper的核心功能在于其强大的滑动效果,它支持多种设备,包括桌面电脑、平板电脑和手机。Swiper的3.0.6版本可能包含...
在 Vue Swiper demo 中,我们首先需要安装 Swiper 相关的依赖。这通常通过 npm 或 yarn 完成,命令如下: ```bash npm install vue-awesome-swiper --save # 或者 yarn add vue-awesome-swiper ``` 安装完成后,在 ...
在本示例中,"swiper轮播图demo"是一个展示如何使用Swiper实现一屏显示三张图片的场景,其中中间图片放大,而两边的图片则缩小,以增强视觉效果。这种设计常见于电商网站、产品展示页面等,能够吸引用户的注意力并...
这个"swiper4-animate-demo.zip"压缩包包含了一个使用Swiper4实现动画效果的示例项目。Swiper4以其灵活性、高性能和丰富的特性而受到开发者们的欢迎,它支持触摸滑动、多设备兼容性,并且提供了大量的动画选项来增强...
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用...
"Swiper-master"是Swiper库的一个版本,其中包含了大量的示例(Demo),帮助开发者了解和学习如何在实际项目中使用Swiper。 Swiper的核心功能包括: 1. **触摸滑动**:Swiper支持触摸设备上的滑动操作,使得用户...
在这个"swiper轮播图demo示例代码"中,我们可以学习到如何使用Swiper来创建一个基本的轮播图。首先,你需要在HTML文件中引入Swiper的相关CSS和JS文件。这些文件通常可以从Swiper的官方网站下载或者通过CDN链接获取。...
【 Expo Deck Swiper Demo 详解】 Expo 是一个开源的框架,它允许开发者使用 React Native 构建原生移动应用,同时提供了丰富的组件库和工具链,极大地简化了跨平台移动应用开发。在这个名为 "expo-deck-swiper-...
**基于Swiper的下拉刷新**是Web开发中一种常见的交互设计,特别是在移动应用和响应式网站中。Swiper是一款强大的、免费的触摸滑动js框架,它为开发者提供了丰富的功能,包括幻灯片切换、轮播效果以及我们关注的下拉...
2018年03月20日,项目中要实现一个比较有意思的轮播效果(这个页面要实现好几个轮播),[线上地址](http://http://www.risfond.com/bdm),Swiper一直用的很顺手,于是继续用Swiper,效果图如下。实际效果一点都不...
在移动端开发中,Swiper 和 TweenMax 是两个非常重要的库,它们可以帮助开发者创建出流畅、交互丰富的用户体验。本文将深入探讨这两个工具的核心概念、用法以及它们在实际项目中的结合应用。 Swiper 是一个强大的...
在"Swiper-demo"这个压缩包文件中,可能包含了使用SwiperJS创建的示例代码和资源。这些示例通常会包含HTML、CSS和JavaScript文件,演示如何配置SwiperJS实例,以及如何与HTML结构配合以实现易企秀类似的特效。通过...
- `demo.html`或`example.html`:演示如何在IE中使用Swiper的示例页面。 - `readme.md`或`docs`:文档和使用指南,解释如何在IE环境下配置和使用Swiper。 通过这些文件,开发者可以学习如何在IE环境下正确设置和...
在本教程中,我们将探讨如何利用Swiper实现一个类似<https://www.swiper.com.cn/demo/web/index.html>所示的横向循环焦点图片功能。 首先,我们需要在项目中引入Swiper。你可以通过CDN链接或者下载其源码到本地来...
Swiper是一个纯JavaScript打造的滑动特效插件,面向手机、平板电脑等移动终端,同时也支持桌面浏览器。Swiper开源、免费、稳定、使用简单且功能强大,是架构移动终端网站的重要选择。 【加载插件】 首先加载插件,...