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

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

图片[1]-原生js使用swiper.js实现轮播图

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

基础使用:Swiper使用方法 – Swiper中文网

下载地址:下载Swiper – Swiper中文网

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
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片