……

swiper

Posted on 2021-09-25 09:24  WALL*E  阅读(59)  评论(0编辑  收藏  举报
<div class="bs-part4">
	<div class="bs-homebox" id="superSlideWrapper">
        <ul id="wws13" class="bsjst">
            <li>
                <img src="static/picture/20210128111529.jpg" class="zj_img">
            </li>
            <li>
                <img src="static/picture/20210128111529.jpg" class="zj_img">
            </li>
            <li>
                <img src="static/picture/20210128111529.jpg" class="zj_img">
            </li>
            <li>
                <img src="static/picture/20210128111529.jpg" class="zj_img">
            </li>
            <li>
                <img src="static/picture/20210128111529.jpg" class="zj_img">
            </li>
            <li>
                <img src="static/picture/20210128111529.jpg" class="zj_img">
            </li>
            <li>
                <img src="static/picture/20210128111529.jpg" class="zj_img">
            </li>
		</ul>
        <a href="javascript:void(0)" class="super-slide-btn prev">
       		<img src="static/picture/left_ro.png">
        </a>
        <a href="javascript:void(0)" class="super-slide-btn next">
       		<img src="static/picture/right_ro.png">
        </a>
    </div>
</div>
.bs-part4 {
	overflow: hidden;
	margin-top: 30px;
}
.bsjst {
	display: block;
	white-space: nowrap;
}
.bsjst li {
    width: 285px;
    height: 374px;
    margin-right: 20px;
    display: inline-block;
}
#superSlideWrapper {
	position: relative
}
.bs-part4 .next img {
	top: 130px;
	position: absolute;
	right: 10px;
}
.prev img {
	top: 130px;
	position: absolute;
	left: 10px;
}

一个页面可以重复使用, 需要id不同。 具体参数查看 SuperSlide

$(document).ready(function() {
    $('#superSlideWrapper').slide({
        mainCell: ".bsjst",
        autoPlay: true,//自动播放,true为是
        effect: "left",//方向或速度
        vis: 4,//可见的数量
        autoPage: true//自动页面
    });
});