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" ><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" >立即购买</a>-->
</li></a>
<a class="swiper-slide" ><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',
},
});
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦