Rumah > Artikel > hujung hadapan web > swiper插件简介以及轮播图的做法

swiper插件简介以及轮播图的做法

PHP中文网asal: 2017-06-19 17:23:161711semak imbas

swiper

Swiper是纯javascript打造的滑动特效插件，⾯面向⼿手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常⽤用效果。

Swiper开源、免费、稳定、使⽤用简单、功能强⼤大，是架构移动终端⽹网站的重要选择！

1.首先创建一个swiper的运行环境，需要用到的文件有swiper.min.js和swiper.min.css文件。

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>

　　3989f20b29ca3784489ad4a92ad594dd2cacc6d41bbb37262a98f745aa00fbf0

73a6ac4ed44ffec12cee46588e518a5e

2.写HTML内容。

<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>

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
　　width: 600px;
　　height: 300px;
}

4.初始化Swiper：最好是挨着36cc49f0c466276486e50c850b7e4956标签（函数调用）

3f1c4e4b6b16bbbd69b2ee476dc4f83a

　　　　var swiper=new Swiper('.swiper-container',{
　　　　　　autoplay:1000,//自动轮播
　　　　　　autoplayDisableOnInteraction:false,//滑动后继续滚动
　　　　　　loop:true,//循环
　　　　　　pagination:'.swiper-pagination',//分页
　　　　　　paginationClickable:true,//小圆点点击
　　　　　　spaceBetween:30,//图片间隙
　　　　　　direction:"horizontal"//默认横向 vertical垂直
　　　　})

2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956

Atas ialah kandungan terperinci swiper插件简介以及轮播图的做法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：ES6 字符串的扩展的高频用法总结Artikel seterusnya：jQuery未定义错误原因(jQuery is not define)

Artikel berkaitan

Lihat lagi