首页 前端知识 swiper 一张图在中间,左右各2张显示一半

swiper 一张图在中间,左右各2张显示一半

2024-06-03 12:06:34 前端知识 前端哥 752 300 我要收藏

new Swiper('.store-honor-contianerwaps', {
autoplay:{
delay:6000
},
speed:600,
loop: true,
spaceBetween:20,
initialSlide: 1,
centeredSlides : true,
slidesPerView : 1.2,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},breakpoints:{
800:{
spaceBetween:20,
}
}
});
复制

<div class="swiper-container store-honor-contianerwaps">
<div class="swiper-wrapper">
{pc:content action="lists" catid="132"}
<!-- 132 -->
{loop $data $v}
<div class="swiper-slide">
<!-- <img src="statics/static/img/aobuts_03.png" alt=""> -->
<img src="{$v[thumb]}">
</div>{/loop}
{/pc}
</div>
<div class="swiper-pagination"></div>
</div>
复制

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10644.html
标签
windows
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!