swiper插件的使用
1.按钮有效代码
<div class="header_lunbottt swiper-onw">
<ul class="header_ulrr swiper-wrapper">
<a class="swiper-slide" href="tel:4001058800"><li class="index_lb swiper-slide" style="background: url('${imagesPath}/ydmetting.jpg') no-repeat">
</li></a>
<a class="swiper-slide" href="http://www.servoffice.com/servoffice-weixin//Art/ArtList?null"><li class="index_lb" style="background: url('${imagesPath}/ydysbt.jpg') no-repeat">
</li></a>
</ul>
<div class="swiper-pagination" style="position: absolute; top: 470px;"></div>
</div>
<script type="text/javascript">
var swiper = new Swiper('.swiper-onw', {
slidesPerView: 1,//一行显示4个
slidesPerColumn: 1,//显示2行
spaceBetween: 0,//轮播间距
autoplay:3000,
pagination: '.swiper-pagination',
});
</script>
2.按钮无效代码
<div class="header_lunbottt swiper-onw">
<ul class="header_ulrr swiper-wrapper">
<a class="swiper-slide" href="tel:4001058800"><li class="index_lb swiper-slide" style="background: url('${imagesPath}/ydmetting.jpg') no-repeat">
<!--<a class="index_bbs_btn" href="http://cs.ecqun.com/mobile/rand?id=690485">立即购买</a>-->
</li></a>
<a class="swiper-slide" href="http://www.servoffice.com/servoffice-weixin//Art/ArtList?null"><li class="index_lb" style="background: url('${imagesPath}/ydysbt.jpg') no-repeat">
</li></a>
</ul>
<div class="swiper-button-prev"></div><!--左箭头-->
<div class="swiper-button-next"></div><!--右箭头-->
</div>
<script type="text/javascript">
var swiper = new Swiper('.swiper-onw', {
slidesPerView: 1,//一行显示4个
slidesPerColumn: 1,//显示2行
spaceBetween: 0,//轮播间距
autoplay:3000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦