前端笔记——Swiper（持续更新中）~

最新推荐文章于 2024-07-10 17:53:31 发布

Mike白

最新推荐文章于 2024-07-10 17:53:31 发布

阅读量2.7k

点赞数 3

分类专栏：学习笔记前端文章标签：前端笔记学习 html javascript

本文链接：https://blog.csdn.net/m0_74171595/article/details/131481582

版权

学习笔记同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

介绍

Swiper 是一个流行的、免费的、开源的 JavaScript 库，用于创建移动设备和桌面端的滑块轮播图、触摸滑动页面、图片和内容的滑动和切换效果。Swiper 可以实现多种滑动效果，如淡入淡出、平移、3D 立体翻转等，同时也支持响应式设计和自动播放等功能。

Swiper 具有良好的可定制性和易用性，支持多种平台和浏览器，还提供了丰富的 API 和事件，可以轻松地实现各种复杂的滑动效果和交互动画。Swiper 可以通过 npm 安装，也可以直接在 HTML 文件中引入 CSS 和 JavaScript 文件来使用。

安装

1、CDN

可以进入Swiper CDN - Swiper中文网直接复制，一般使用4.0.1版本，复制下面两行，并且修改版本号即可。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.min.js"></script>

将版本号改为4.0.1，不能用4.0.0，有bug。

Swiper 4.0.0 在某些情况下可能会出现一些已知的 bug，例如：

在 iOS Safari 上，滑动时可能会出现卡顿和闪烁的问题；
在使用动画效果时，可能会出现性能问题；
在某些场景下，可能会出现布局错乱的问题。

这些问题在 Swiper 4.0.1 中得到了修复，因此建议使用 Swiper 4.0.1 或更高版本。

2、安装到本地

将cdn的路径直接复制到浏览器打开，保存到本地，可行但太low，不适合我们高端人才。

使用npm

npm init -y
npm i swiper@4.0.1

引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">-->
    <!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>-->
    <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
    <script src="node_modules/swiper/dist/js/swiper.min.js"></script>
</head>
<body>

</body>
</html>

如上，即可将swiper引入到我们的项目中。

使用

初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">-->
    <!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>-->
    <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
    <script src="node_modules/swiper/dist/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper"><!--这个名字要改成swiper-container-->
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
    </div>
</div>
<script>
    var mySwiper = new Swiper('.swiper', {//这个名字要改成swiper-container
        autoplay: true,//可选选项，自动滑动
      
    })
</script>
</body>
</html>

注意：由于我们使用的swiper4，最外层class名要改为swiper-container，下面的js也要改。

配置

Swiper 提供了丰富的配置选项，可以帮助我们实现各种复杂的滑动效果和交互动画。下面我们将介绍一些常用的配置选项。

Basic 基本配置

Swiper 的基本配置包括轮播图的容器和轮播图的内容。我们需要创建一个包含轮播图容器和轮播图内容的 HTML 结构，然后使用 JavaScript 初始化 Swiper。

以下是一个基本的 Swiper 配置示例：

<!DOCTYPE html>
<html>
<head>
    <title>Swiper 示例</title>
    <!-- 引入 Swiper 样式文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
    <style>
        /* 设置轮播图容器的高度 */
        .swiper-container {
            height: 400px;
        }

        /* 设置轮播图的宽度和高度 */
        .swiper-slide {
            width: 100%;
            height: 100%;
        }

        /* 设置轮播图中图片的宽度和高度 */
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image1.jpg"></div>
            <div class="swiper-slide"><img src="image2.jpg"></div>
            <div class="swiper-slide"><img src="image3.jpg"></div>
        </div>
    </div>

    <!-- 引入 Swiper JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
    <script>
        // 初始化 Swiper
        var swiper = new Swiper('.swiper-container', {
            // 设置滑动效果和方向
            effect: 'fade',
            direction: 'horizontal',
            // 设置自动播放和分页器
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
        });
    </script>
</body>
</html>

在上面的示例中，我们创建了一个包含轮播图容器和轮播图内容的 HTML 结构。我们将轮播图容器的高度设置为 400px，然后在容器中添加了三张图片。我们使用 JavaScript 初始化了 Swiper，并设置了滑动效果、自动播放等配置选项。

Loop 循环配置

Loop 循环配置是 Swiper 的一个常用功能，可以实现轮播图的无限循环播放。我们可以通过配置选项来启用和自定义 Loop 循环配置。

以下是一个启用了 Loop 循环配置的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Swiper 示例</title>
    <!-- 引入 Swiper 样式文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
    <style>
        /* 设置轮播图容器的高度 */
        .swiper-container {
            height: 400px;
        }

        /* 设置轮播图的宽度和高度 */
        .swiper-slide {
            width: 100%;
            height: 100%;
        }

        /* 设置轮播图中图片的宽度和高度 */
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image1.jpg"></div>
            <div class="swiper-slide"><img src="image2.jpg"></div>
            <div class="swiper-slide"><img src="image3.jpg"></div>
        </div>
        <!-- 添加前进后退按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <!-- 引入 Swiper JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
    <script>
        // 初始化 Swiper
        var swiper = new Swiper('.swiper-container', {
            // 设置滑动效果和方向
            effect: 'fade',
            direction: 'horizontal',
            // 设置自动播放和分页器
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            // 启用 Loop 循环配置
            loop: true,
            // 添加前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>
</html>

在上面的示例中，我们启用了 Loop 循环配置，设置 loop: true 即可。此外，我们还添加了前进后退按钮，方便用户手动控制轮播图的播放。

Effects 滑动效果配置

Swiper 支持多种滑动效果，可以通过配置选项来设置滑动效果。以下是几种常用的滑动效果：

slide：普通滑动效果（默认值）。
fade：淡入淡出效果。
cube：立方体旋转效果。
coverflow：3D 翻转效果。

我们可以通过设置 effect 属性来启用并自定义滑动效果。例如，以下示例使用了淡入淡出效果：

<!DOCTYPE html>
<html>
<head>
    <title>Swiper 示例</title>
    <!-- 引入 Swiper 样式文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
    <style>
        /* 设置轮播图容器的高度 */
        .swiper-container {
            height: 400px;
        }

        /* 设置轮播图的宽度和高度 */
        .swiper-slide {
            width: 100%;
            height: 100%;
        }

        /* 设置轮播图中图片的宽度和高度 */
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image1.jpg"></div>
            <div class="swiper-slide"><img src="image2.jpg"></div>
            <div class="swiper-slide"><img src="image3.jpg"></div>
        </div>
    </div>

    <!-- 引入 Swiper JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
    <script>
        // 初始化 Swiper
        var swiper = new Swiper('.swiper-container', {
            // 启用淡入淡出效果
            effect: 'fade',
            // 设置自动播放和分页器
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    </script>
</body>
</html>

在上面的示例中，我们设置 effect: 'fade' 启用了淡入淡出效果，并添加了分页器用于展示当前轮播图的位置。

pagination 分页器是 Swiper 内置的一个组件，用于显示当前轮播图的页码和总页数。我们可以通过配置选项来启用和自定义 pagination 分页器。

以下是一个启用了 pagination 分页器的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Swiper 示例</title>
    <!-- 引入 Swiper 样式文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
    <style>
        /* 设置轮播图容器的高度 */
        .swiper-container {
            height: 400px;
        }

        /* 设置轮播图的宽度和高度 */
        .swiper-slide {
            width: 100%;
            height: 100%;
        }

        /* 设置轮播图中图片的宽度和高度 */
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image1.jpg"></div>
            <div class="swiper-slide"><img src="image2.jpg"></div>
            <div class="swiper-slide"><img src="image3.jpg"></div>
        </div>
        <!-- 添加分页器 -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- 引入 Swiper JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
    <script>
        // 初始化 Swiper
        var swiper = new Swiper('.swiper-container', {
            // 设置滑动效果和方向
            effect: 'fade',
            direction: 'horizontal',
            // 设置自动播放和分页器
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + (index + 1) + '</span>';
                },
            },
        });
    </script>
</body>
</html>

在上面的示例中，我们启用了 pagination 分页器，并自定义了分页器的样式和渲染方式。具体来说，我们设置了 pagination.el 选项为 .swiper-pagination，表示将分页器添加到指定的 HTML 元素中。我们还设置了 pagination.clickable 选项为 true，表示分页器上的页码可以被点击。我们还自定义了分页器的渲染方式，通过 pagination.renderBullet 选项返回一个包含页码的 HTML 元素。

不要忘记html标签也要复制，注意粘贴位置

navigation 前进后退按钮是 Swiper 内置的一个组件，用于显示前进和后退按钮，以便用户可以手动控制轮播图的滑动方向。我们可以通过配置选项来启用和自定义 navigation 前进后退按钮。

以下是一个启用了 navigation 前进后退按钮的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Swiper 示例</title>
    <!-- 引入 Swiper 样式文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
    <style>
        /* 设置轮播图容器的高度 */
        .swiper-container {
            height: 400px;
        }

        /* 设置轮播图的宽度和高度 */
        .swiper-slide {
            width: 100%;
            height: 100%;
        }

        /* 设置轮播图中图片的宽度和高度 */
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image1.jpg"></div>
            <div class="swiper-slide"><img src="image2.jpg"></div>
            <div class="swiper-slide"><img src="image3.jpg"></div>
        </div>
        <!-- 添加前进后退按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <!-- 引入 Swiper JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
    <script>
        // 初始化 Swiper
        var swiper = new Swiper('.swiper-container', {
            // 设置滑动效果和方向
            effect: 'fade',
            direction: 'horizontal',
            // 设置自动播放和分页器
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            // 设置前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>
</html>

在上面的示例中，我们启用了 navigation 前进后退按钮，并设置了前进和后退按钮的 HTML 元素。具体来说，我们设置了 navigation.nextEl 选项为 .swiper-button-next，表示将后退按钮添加到指定的 HTML 元素中。我们还设置了 navigation.prevEl 选项为 .swiper-button-prev，表示将前进按钮添加到指定的 HTML 元素中。

注意html标签也要复制，注意粘贴位置

Autoplay 自动切换

autoplay 选项是 Swiper 中控制自动播放的配置选项，可以设置轮播图自动播放的间隔时间、是否在用户操作后停止自动播放等。以下是 autoplay 选项的详细介绍：

delay：自动播放的间隔时间，默认值为 3000 毫秒，即 3 秒。
disableOnInteraction：用户操作后是否停止自动播放。默认值为 true，即用户操作后停止自动播放，可以设置为 false 来禁止此功能。
stopOnLastSlide：是否在轮播图的最后一张停止自动播放。默认值为 false，即不停止自动播放，可以设置为 true 来停止自动播放。
reverseDirection：是否反向播放轮播图。默认值为 false，即正向播放，可以设置为 true 来反向播放轮播图。
waitForTransition：在进行轮播图切换时，是否等待过渡效果完成后再进行下一次自动播放。默认值为 true，即等待过渡效果完成再自动播放，可以设置为 false 来不等待过渡效果。

以下是一个完整的 autoplay 配置示例：

var swiper = new Swiper('.swiper-container', {
  // 其他配置选项...
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
    stopOnLastSlide: false,
    reverseDirection: false,
    waitForTransition: true,
  },
});

在使用 autoplay 选项时，需要注意一些潜在的问题，例如自动播放可能会对用户体验造成负面影响，因此应该将自动播放的间隔时间控制得不要过短，以免影响用户的阅读体验。另外，在使用 Swiper 的时候，还需要注意一些其他的配置选项，例如轮播图的切换效果、轮播图的方向、轮播图的循环等等，这些选项可以根据实际需求进行调整。

文章写作不易，对您有帮助的话，欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

Mike白

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端笔记——Swiper（持续更新中）~

Swiper 是一个流行的、免费的、开源的JavaScript库，用于创建移动设备和桌面端的滑块轮播图、触摸滑动页面、图片和内容的滑动和切换效果。Swiper 可以实现多种滑动效果，如淡入淡出、平移、3D 立体翻转等，同时也支持响应式设计和自动播放等功能。Swiper 具有良好的可定制性和易用性，支持多种平台和浏览器，还提供了丰富的 API 和事件，可以轻松地实现各种复杂的滑动效果和交互动画。
复制链接

扫一扫