Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
<div class="banner-container swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href=""><img src="__TPL__/linshi/banner1.jpg"></a></div>
<div class="swiper-slide"><a href=""><img src="__TPL__/linshi/banner2.jpg"></a></div>
<div class="swiper-slide"><a href=""><img src="__TPL__/linshi/banner3.jpg"></a></div>
<div class="swiper-slide"><a href=""><img src="__TPL__/linshi/banner4.jpg"></a></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<section class="recommend-swiper swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href=""><img src="__TPL__/linshi/l_jinghui.png" /></a></div>
<div class="swiper-slide"><a href=""><img src="__TPL__/linshi/l_lihong.png" /></a></div>
<div class="swiper-slide"><a href=""><img src="__TPL__/linshi/l_lixing.png" /></a></div>
<div class="swiper-slide"><a href=""><img src="__TPL__/linshi/l_mashi.png" /></a></div>
<div class="swiper-slide"><a href=""><img src="__TPL__/linshi/l_taihao.png" /></a></div>
</div>
</section>
var mySwiper = new Swiper ('.banner-container', {
loop: true,
autoplay: 5000,
// 如果需要分页器
pagination: '.swiper-pagination',
});
var swiper = new Swiper('.recommend-swiper', {
slidesPerView: 2.5,
paginationClickable: true,
spaceBetween: 10
});