swiper组件 HTML单页面

最新推荐文章于 2025-06-14 21:19:25 发布

宝儿的程序生涯

最新推荐文章于 2025-06-14 21:19:25 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：常用小组件

本文链接：https://blog.youkuaiyun.com/fengtingYan/article/details/86704117

常用小组件专栏收录该内容

20 篇文章

订阅专栏

本文简要介绍如何使用Swiper组件创建HTML单页面的轮播图。推荐了Swiper官方网站作为详细教程来源，并提及加载swiper.min.js和swiper.min.css文件以实现自动轮播功能。

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

使用swiper来实现轮播图

由于简单这里当然就不会去详细介绍了，推荐两个网址：

1.http://www.swiper.com.cn/usage/index.html 它很简明地告诉了你应该如何去搭建这样的框架。

2.http://www.swiper.com.cn/api/ 这里讲述了我们应该如何去设置更多的功能。

1 加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</htm

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</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>
导航等组件可以放在container之外

自动轮播
在这里插入图片描述

css:
.swiper-container {
  margin-top: 44px;
    width: 100%;
    height: 150px;
    border: 0;
}
.swiper-container img {
    width: 100%;
    height: 150px;
    border: 0;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

html:
<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img data-src="images/tim.jpg" class="swiper-lazy" /></div>
            <div class="swiper-slide"><img data-src="images/timg.jpg" class="swiper-lazy" /></div>
            <div class="swiper-slide"><img data-src="images/timgg.jpg" class="swiper-lazy" /></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
    </div>
    
<script>
var swiper = new Swiper('.swiper-container', {
     lazy: true,
       pagination: {
           el: '.swiper-pagination',
       },
       spaceBetween: 30,
       centeredSlides: true,
       autoplay: {
           delay: 2500,
           disableOnInteraction: false,
       }
   });
 </script>