SOURCE

console 命令行工具 X clear

                    
>
console
var mySwiper = new Swiper('.swiper-container', {
    speed: 1000,
    loop: true,
    // autoplay: true,//等同于以下设置
    autoplay: {
        delay: 1000,
        stopOnLastSlide: true,
        disableOnInteraction: true, //用户操作之后是否停止自动轮播默认true
    },
    // slidesPerView: 1,//显示滑动页面显示几个图
    // centeredSlides: true,
    direction: 'horizontal',  //horizontal   vertical 
    slidesPerView: 1,
    // loopAdditionalSlides: 3,
});
<body class='bg'>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class='bg1'></div>
            </div>
            <div class="swiper-slide">
                <div class='bg2'></div>
            </div>
            <div class="swiper-slide">
                <div class='bg3'></div>
            </div>
        </div>
    </div>
</body>
.bg {
    background-color: #1d428a;
}

.swiper-container {
    position: absolute;
    top: 30%;
    left: 40%;
    width: 7rem;
    height: auto;
    background-color: #ff5214;
    overflow: hidden;
}

.swiper-wrapper {
    /* margin-left: 3rem; */
}

.swiper-slide {
    width: auto;
    height: auto;
}
.swiper-slide .bg1{
    width: 6.39rem;
    height: 4.07rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/158426/18/6329/66802/601ce42bE6111d955/1825af4d03606d3b.png);
    background-size: 100%;
}
.swiper-slide .bg2{
    width: 6.39rem;
    height: 4.07rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/155999/23/8910/58299/601ce42bE40f5d6d7/7fa6aae9239077a0.png);
    background-size: 100%;
}
.swiper-slide .bg3{
    width: 6.39rem;
    height: 4.07rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/168320/11/5643/59634/601ce42bEa1a5cc28/32c8728d667df277.png);
    background-size: 100%;
}

本项目引用的自定义外部资源