带多种切换动画样式的Swiper轮播图效果

所属分类：焦点图/幻灯片

浏览：355次- 下载：1次- 评论： 1次- 更新时间：2023-07-01

导入swiper js和css

<link rel="stylesheet" type="text/css" href="./css/swiper.css"/>
<script src="./js/swiper.js" type="text/javascript" charset="utf-8"></script>

以第一个轮播为列：

水平切换

<div class="swiper-container" id="case1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/t1.png"></div>
        <div class="swiper-slide"><img src="img/t2.png"></div>
        <div class="swiper-slide"><img src="img/t4.png"></div>
    </div>
    <!-- 导航按钮 上一页下一页 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

js内容：

var mySwiper = new Swiper('#case1', {
    autoplay: true, //可选选项，自动滑动
    initialSlide: 1, //默认显示第二张图片索引从0开始
    speed: 2000, //设置过度时间
    /* grabCursor: true,//鼠标样式根据浏览器不同而定 */
    autoplay: {
        delay: 3000
    },
    /*  设置每隔3000毫秒切换 */
    <!-- 分页器 -->
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    <!-- 导航按钮 上一页下一页 -->
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    <!-- 滚动条 -->
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
    },
    /*  设置当鼠标移入图片时是否停止轮播*/
    autoplay: {
        disableOnInteraction: false,
    },
});

css内容：设置了一下宽高，居中显示

p{text-align: center;}
    img{ width: 43.75rem;
    height: 18.125rem;
}
.swiper-container{
    width: 43.75rem;
    height: 18.125rem;
    margin:0 auto;
}