swiper&微场景

swiper微场景开发流程:

1.下载最新的swiper,官方网址:http://www.swiper.com.cn/ 

2.API文档是配置项手册

中文教程---Swiper Animate是Swiper的动画效果,功能很强大

3.引入CSS和JS文件:

swiper.min.js和swiper.min.css。如果用到动画效果则需要引入swiper.animate.min.js和animate.min.css。以及适合移动端开发的rem.js(这个是自制的响应式布局js)

4.初始化

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
	autoplay: true,//可选选项,自动滑动
})
</script>
注意:下载最新的swiper(目前是4.1版本) ,一个页面使用多个swiper时,可以给每个容器加上ID或Class区分,要保留默认的类名swiper-container,注册对应的实例对象即可。默认的类名改动则会出现错误。
例:
<div class="swiper-container" id="swiper1">....<div>
<div class="swiper-container" id="swiper2">....<div>
<div class="swiper-container" id="swiper3">....<div>
JS
var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');
var swiper3 = new Swiper('#swiper3');
配置不的分页器也要给不同的分页器指定 ID或Class区分,修改默认类名失效。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值