-

自适应滑动插件swiper.js

WEB前端

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/

来源:自适应滑动插件swiper.js

4 评论 “自适应滑动插件swiper.js

    guangzhouchengan 评论:
    2019年5月9日 上午1:24

    楼下是疯子。哈哈

    吾读 评论:
    2019年5月10日 上午12:07

    写得太精彩了,以这样的篇幅写了这么大跨度的文章,精品。向楼主学习!

    2ou 评论:
    2019年5月11日 上午12:25

    写得太精彩了,以这样的篇幅写了这么大跨度的文章,精品。向楼主学习!

    […] Swiper是一个开源、免费、强大的触摸滑动插件。Vue-Awesome-Swiper是一个基于 Swiper4 和 Vue 的轮播组件,Vue-Awesome-Swiper也支持服务端渲染和单页应用。下面雷雪松给大家介绍一下Vue的轮播组件Vue-Awesome-Swiper。 1、Vue-Awesome-Swiper安装 […]

发表评论

电子邮件地址不会被公开。 必填项已用*标注