使用swiper实现轮播图

原创已于 2023-12-29 17:16:42 修改 · 3.8k 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #html

于 2023-10-07 17:31:31 首次发布

本文详细介绍了如何在HTML中使用Swiper库创建轮播图，包括引入CSS和JS文件、创建div结构、设置swiper样式和配置选项，以及提供了一个示例代码片段。

该文章已生成可运行项目，

首先在html文件中导入css和js

创建div，放入需要轮播的内容

根据需求调整style样式，在这里我只设置最外层盒子的大小，你们可以根据自己的需求进行调整

初始化swiper，设置想要的样式，比如可以选择轮播形式，排列的方式，是否自动轮播，是否循环等

完整代码如下所示：

在使用swiper之前需要先引入需要的css和js文件，可以直接下载文件也可以选择使用CDN

下载Swiper - Swiper中文网

Swiper CDN - Swiper中文网

在本文中我选择CDN的方式

首先在html文件中导入swiper需要的css和js资源文件

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

创建div，放入需要轮播的内容

<div class="swiper">
     <div class="swiper-wrapper">
         <div class="swiper-slide" style="background: #64e4b3;">Slide 1</div>
         <div class="swiper-slide" style="background: #3ed2ff;">Slide 2</div>
         <div class="swiper-slide" style="background: #4495f3;">Slide 3</div>
         <div class="swiper-slide" style="background: #ff6600;">Slide 4</div>
         <div class="swiper-slide" style="background: #fdfcc0;">Slide 5</div>
     </div>
     <!--分页器导航。默认为底部的小圆点，如果放置在swiper外面，需要自定义样式。-->
     <div class="swiper-pagination"></div>
     <!-- 上一张下一张切换按钮 -->
     <div class="swiper-button-prev"></div>
     <div class="swiper-button-next"></div>
</div>

根据需求调整style样式，你们可以根据自己的需求进行调整

<style>
    .swiper {
    width: 500px;
    height: 270px;
    }  
     /* 默认 */
    .swiper-slide{
        color: #fff;
    }
    /* 当前正在轮播的类名会加上.swiper-slide-active */
    .swiper-slide-active{
        color: #000;
    }
</style>

初始化swiper，设置想要的样式，比如可以选择轮播形式，排列的方式，是否自动轮播，是否循环等

详见中文api - Swiper中文网

<script>        
        var mySwiper = new Swiper ('.swiper', {
          direction: 'horizontal', // 水平切换选项
          loop: true, // 循环模式选项
          //轮播切换的速度
          speed:600,
          //自动轮播,设置时间为3秒自动切换
          autoplay: {
              delay: 3000,
              // 设置为false用户进行操作之后，自动轮播仍生效，默认为true
              disableOnInteraction: false,
          },
          //上一张下一张切换按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
           //分页器导航
          pagination: {
              el: '.swiper-pagination',
              //设置为true时点击分页器的指示点可以控制Swiper的切换，默认为false
              clickable :true,
            },
        })        
</script>

到这一步，一个简单的轮播图就完成了

轮播演示：

完整代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta content="charset=utf-8" />
    <title>swipter的使用</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
</head>
<style>
    .swiper {
        width: 500px;
        height: 270px;
    }
    /* 默认 */
    .swiper-slide{
        color: #fff;
    }
    /* 当前正在轮播的类名会加上.swiper-slide-active */
    .swiper-slide-active{
        color: #000;
    }
</style>

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background: #64e4b3;">Slide 1</div>
            <div class="swiper-slide" style="background: #3ed2ff;">Slide 2</div>
            <div class="swiper-slide" style="background: #4495f3;">Slide 3</div>
            <div class="swiper-slide" style="background: #ff6600;">Slide 4</div>
            <div class="swiper-slide" style="background: #fdfcc0;">Slide 5</div>
        </div>
        <!--分页器导航。默认为底部的小圆点，如果放置在swiper外面，需要自定义样式。-->
        <div class="swiper-pagination"></div>
        <!-- 上一张下一张切换按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            direction: 'horizontal', // 水平切换选项
            loop: true, // 循环模式选项
            // 轮播切换的速度
            speed:600,
            //自动轮播,设置时间为3秒自动切换
            autoplay: {
                delay: 3000,
                // 设置为false用户进行操作之后，自动轮播仍生效，默认为true
                disableOnInteraction: false,
            },
            // 上一张下一张按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 分页器
            pagination: {
                el: '.swiper-pagination',
                //点击分页器的指示点分页器会控制Swiper切换，默认为false
                clickable: true,
            },
        })        
    </script>
</body>

</html>

本文章已经生成可运行项目