swiper的基础使用(十八)
来源:互联网 发布:模拟别人说话声音软件 编辑:程序博客网 时间:2024/06/03 17:29
本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果
首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。
首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="logo.png"></div> <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/5.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/6.jpg)"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>然后到js部分添加翻页效果,进行初始化。
var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', nextButton:'.swiper-button-next', prevButton:'.swiper-button-prev', grabCursor:true, //抓手光标开启 effect:'flip' //翻转效果:3D翻转这样一个带有3D翻页效果的页面就完成了
0 0
- swiper的基础使用(十八)
- swiper的基础使用(十八)
- swiper的基础使用(十八)
- swiper的基础使用(二十八)
- swiper教程--swiper的基础使用(十九)
- swiper教程——swiper的基础使用(十九)
- swiper教程--swiper的基础使用(二十)
- swiper的基础使用(二)
- swiper的基础使用(三)
- swiper的基础使用(四)
- swiper的基础使用(一)
- swiper的基础使用(二)
- swiper的基础使用(三)
- swiper的基础使用(四)
- swiper的基础使用(五)
- swiper的基础使用(六)
- swiper的基础使用(七)
- swiper的基础使用(八)
- arm系列cpu和嵌入式系统简单归纳
- Q9:斐波那契数列
- 一份安卓笔试题的反思改错
- Java - 散列码
- Irrlicht学习笔记(8)--SpecialFX
- swiper的基础使用(十八)
- visual studio 开发的MFC程序打包
- 理解ThreadLocal
- IOS常用宏定义
- [51nod 1201]整数划分
- 并行程序设计模型
- C++的IO库常见错误
- Spring事务异常回滚,捕获异常不抛出就不会回滚
- 知识点总结