HTML
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="__IMG__/hot1.png">
</div>
<div class="swiper-slide">
<img src="__IMG__/hot1.png">
</div>
<div class="swiper-slide">
<img src="__IMG__/hot1.png">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
JS
重点是:
“slidesOffsetBefore”:设定slide与左边框的预设偏移量
“lef”:为距浏览器左侧距离
var lef = $(".tit").offset().left
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
// centeredSlides: true,
paginationClickable: true,
spaceBetween: 30,
slidesOffsetBefore:lef,
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
效果图: