自适应滑动插件swiper.js
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果,也有3D效果，支持鼠标滚轮和键盘。它的目的是用于移动网站,移动web应用程序和移动本地/混合应用。
1、首先加载插件，有swiper.min.js和swiper.min.css文件。
1 2 | <link rel="stylesheet" href="path/to/swiper.min.css"> <script src="path/to/swiper.min.js"></script> |
2、HTML内容，Swiper基本的布局。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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之外--> |
3、初始化Swiper，这样你想要的滑动效果就实现了,他有很多参数可以供你自定义
1 2 3 4 5 6 7 8 9 10 11 | var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical',//水平还是垂直方向 loop: true,//循环 // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', }) |
Swiper官网：http://www.idangero.us/swiper
Swiper中文网：http://www.swiper.com.cn/
2019年5月10日 上午12:07
写得太精彩了，以这样的篇幅写了这么大跨度的文章，精品。向楼主学习！
2019年5月11日 上午12:25
写得太精彩了，以这样的篇幅写了这么大跨度的文章，精品。向楼主学习！