Swiper实现两种常用轮播图

最新推荐文章于 2025-04-07 14:00:27 发布

Flynn_curry

最新推荐文章于 2025-04-07 14:00:27 发布

阅读量9.5k

点赞数 3

分类专栏：前后端相关学习文章标签： swiper 轮播图前端

本文链接：https://blog.youkuaiyun.com/Flynn_curry/article/details/90237934

版权

前后端相关学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用Swiper库创建网页上的轮播图效果。通过详细的HTML、CSS和JS代码示例，展示了两种不同风格的轮播图实现方式，包括图片自动切换和分页指示器功能。

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

效果图：

轮播图

市面上实现的网页中的轮播图大多都是用Swiper实现的，主要就是这两种，其实没必要写这篇的，写这篇的目的.....emmm.....方便以后伸手使用和练习两个swiper......别打我。。

html：

<!DOCTYPE html>
<html>
<head>
	<title>实用轮播图</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./swiper.min.css">
	<link rel="stylesheet" type="text/css" href="./test19.css">
	<script src="./swiper.min.js"></script>
</head>
<body>
	<div class="lunbo-leave fluidwidth">
        <div class="swiper-container swiper1-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./images/lunbo-1.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-2.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-3.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-4.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-5.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-6.jpg" class="swiper-imagesize"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-p1"></div>
        </div>
    </div>
    <div class="lunbo-leave fluidwidth">
        <div class="swiper-container swiper2-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./images/lunbo-1.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-2.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-3.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-4.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-5.jpg" class="swiper-imagesize"></div>
              <div class="swiper-slide"><img src="./images/lunbo-6.jpg" class="swiper-imagesize"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-p2"></div>
        </div>
    </div>
	<script type="text/javascript" src="./test19.js"></script>
</body>
</html>

css：

/*----------------------轮播图公共样式层-----------------------*/
.lunbo-leave {
    
}
.swiper-imagesize {
    max-width: 1280px;
    width: 100%;
    min-width: 1100px;
    /*height: 700px;*/
}
.swiper-wrapper {
    max-width: 1280px;
    width: 100%;
    min-width: 1100px;
    /*height: 700px;*/
}
.swiper-pagination-bullet-active {
    background-color: #A0100F;
}
.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;
}
/*------------------------轮播图1层---------------------------*/
.swiper1-container {
    max-width: 1280px;
    width: 100%;
    min-width: 1100px;
    /*height: 700px;*/
}
/*------------------------轮播图2层---------------------------*/
.swiper2-container {
    max-width: 1280px;
    width: 100%;
    min-width: 1100px;
    /*height: 700px;*/
}

js：

var swiper1 = new Swiper('.swiper1-container', { // 区分容器
    centeredSlides: true,
    loop: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-p1',
      clickable: true,
    },

});
var swiper2 = new Swiper('.swiper2-container', { // 区分容器
    effect: 'fade',
    loop: true,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-p2',
      clickable: true,
    },

});

素材包：click here