轮播图常用js

垂直轮播

  $('.inx_banner_cont').slide({ mainCell: ".gundon ul", autoPlay: true, effect: "topMarquee", vis: 1, interTime: 50 });
  

//左右切换放在swiper-container外面，要自定义的话

 <div class="swiper_box">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="static/imgs/part1.png"></div>
            <div class="swiper-slide"><img src="static/imgs/part2.png"></div>
            <div class="swiper-slide"><img src="static/imgs/part3.png"></div>
            <div class="swiper-slide"><img src="static/imgs/part4.png"></div>
            <div class="swiper-slide"><img src="static/imgs/part5.png"></div>
        </div>
    </div>
    <div class="swiper-prev">&lt;</div>
    <div class="swiper-next">&gt;</div>
</div>
        
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true, //点击指示点跳转
        },
        slidesPerView: 5,//显示多少个
        direction: "vertical",//垂直方向
        loop: true,//无限循环
        autoplay: { //自动播放
            delay: 2000,
        },
        navigation: { //左右切换
            nextEl: '.swiper-next',
            prevEl: '.swiper-prev',
    },
    });
</script>

.swiper_box {
position: relative;
}

.swiper-prev {
    position: absolute;
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
}

.swiper-next {
    position: absolute;
    top: 50%;
    right: -9px;
    transform: translateY(-50%);
}

.swiper-prev,
.swiper-next {
    width: 20px;
    height: 20px;
    background: #53547A;
    opacity: 0.15;
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}