原生js使用swiper.js实现轮播图

下图为：swiper基础实例(自动播放 280)

swiper.js官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

280号实例：自动切换（含分页器，左右导航按钮）：Swiper demo

示例代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper</title>
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <style>
        .swiper {   /* 设置轮播图宽高 */
            width: 100%;
            height: 430px;
        }
    </style>
</head>

<body>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="图片路径"  style="width:100%;height:100%;"></div>
            <div class="swiper-slide"><img src="图片路径"  style="width:100%;height:100%;"></div>
            <div class="swiper-slide"><img src="图片路径"  style="width:100%;height:100%;"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <script src="../js/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
    </script>
</body>

</html>

若想实现点击跳转，使用a标签包裹img标签设置相关属性即可

文章版权归作者所有，未经允许请勿转载。

THE END