首页 新闻 搜索 专区 学院

swiper的使用

0
[待解决问题]

最近想做一个手机的全屏垂直轮播图,查了查swiper比较适合,但是不知道怎么下手,有没有大神指点一下。

灬意志的主页 灬意志 | 菜鸟二级 | 园豆:208
提问于:2018-04-10 15:06
< >
分享
所有回答(2)
0

 这是我Github  : https://github.com/dhucaichao/swiper.git  下载swiper.jquery.min.js 和 swiper.min.css 一个js文件,一个css文件,当然js文件引入前要先引入jquery  

html 中

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<p class="swiper-title">公司员工生日会</p>
<img src="{$_W['siteroot']}addons/xfl_test/template/images/banner3@2x.png" alt="">
</div>
</div>
<!-- <div class="swiper-slide">
<div>
<p class="swiper-title">2018年什么什么什么什么的的活动价</p>
<img src="images/banner2@2x.png" alt="">
</div>
</div> -->
<div class="swiper-slide">
<div>
<p class="swiper-title">2018年公司团建活动</p>
<img src="images/banner4@2x.png" alt="">
</div>
</div>

</div>
</div>

 

js中 

var swidth=$(document).width()*0.78*0.9
// console.log(swidth)
var swiper = new Swiper('.swiper-container', {
// loop: true,
spaceBetween: 15,
// autoplay: 3000 ,//可选选项,自动滑动
slidesOffsetBefore: 37,
width: swidth,
});
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}

河畔 | 园豆:723 (小虾三级) | 2018-04-10 17:49
0

http://www.swiper.com.cn/usage/index.html

魏耀峰 | 园豆:222 (菜鸟二级) | 2018-04-10 19:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册