利用swiper实现轮播图效果的使用手册

先在官网下载swiper软件，我这边下载的是swiper6.8.4版本的，如图所示：

下载好后打开安装包，打开swiper-6.8.4\swiper-master\package，在package这个文件夹里找到这两个压缩文件并赋值粘贴到自己的文件目录下方便引用：就是这两个文件：

接下来打开swiper官网，在中文教程里找到swiper使用方法这个目录点击，

将此网页里的第1，2，3，4part复制并粘贴在自己的vscode的html文件里（注意要粘贴对位置哦）

这样你就拥有一个简单的轮播图效果了，如果要改变里面的属性，则可在Api里选择相应的效果，将代码复制或稍加更改粘贴在自己的html文件里即可使用。

下图是我粘贴并进行改动的一套代码，大家可以参考一下

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
            /* 改变下面小点的颜色 */
            --swiper-theme-color: #ff6600;
            /* 设置左右箭头的颜色风格 */
            --swiper-navigation-color: #00ff33;
            /* 设置左右箭头的大小 */
            --swiper-navigation-size: 30px;


        }

        /* 左右箭头加上hide类名时候隐藏 */
        .swiper-container .hide {
            opacity: 0;
        }

        /* 改变左右箭头的样式 */
        .swiper-button-next,
        .swiper-button-prev {
            transition: opacity 0.5s;
            background-color: rgba(128, 128, 128, 0.322);
            width: 40px;
            height: 40px;

        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <!-- data-swiper-autoplay="800"改变slide的速度 -->
        <div class="swiper-wrapper" data-swiper-autoplay="800">
            <div class="swiper-slide" data-swiper-autoplay="800"><img src="../../../img/1.jpg" alt="" width="600px"
                    height="300px"></div>
            <div class="swiper-slide" data-swiper-autoplay="800"><img src="../../../img/2.jpg" alt="" width="600px"
                    height="300px"></div>
            <div class="swiper-slide" data-swiper-autoplay="800"><img src="../../../img/3.jpg" alt="" width="600px"
                    height="300px"></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>


</body>

</html>
<script src="./swiper-bundle.min.js"></script>

<script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            dynamicBullets: true,
            // 很多个图片时候小点会变化
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },


        // 如果需要滚动条
        // scrollbar: {
        //     el: '.swiper-scrollbar',
        // },
    })
    mySwiper.el.onmouseover = function () {
        mySwiper.navigation.$nextEl.removeClass('hide');
        mySwiper.navigation.$prevEl.removeClass('hide');
    }
    mySwiper.el.onmouseout = function () {
        mySwiper.navigation.$nextEl.addClass('hide');
        mySwiper.navigation.$prevEl.addClass('hide');
    }       
</script>

效果图，鼠标移出时候箭头隐藏，移入时显示，自己手动添加了背景色灰色，更改了切换速度等

原文链接：https://blog.csdn.net/majiaxiaoguniang/article/details/125790013