swiper插件的的使用

最新推荐文章于 2025-02-22 10:36:31 发布

shixue7758

最新推荐文章于 2025-02-22 10:36:31 发布

阅读量741

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/shixue7758/article/details/116944591

版权

本文介绍了如何使用swiper插件实现轮播效果。首先从官网下载swiper压缩包，接着在项目中引入css和js文件。然后，遵循中文教程的步骤操作，并针对图片内容设置样式，最终成功实现轮播图功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、键入官网点击进入官网，点击获取Swiper，下载swiper的压缩包
2、在对应地代码部分引入压缩包下边的dist中的css下的swiper.min.css和js下的swiper.min.js
3、按照官网中中文教程的使用步骤，点击进入使用步骤，一步步进行即可
4、如果轮播图中的内容是图片的话，可以设置图片的样式为

img {
            width: 100%;
            height: 100%;
}

5、实现轮播效果的源码

<!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>Document</title>
    <link rel="stylesheet" href="./swiper.min.css">
    <script src="./swiper.min.js"></script>
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        }  
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./banner1.dpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./banner2.dpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./banner3.dpg" alt="">
            </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>
        var mySwiper = new Swiper ('.swiper-container', {
            
            loop: true, // 循环模式选项
            
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
        })        
    </script>
</body>
</html>