基于swiper实现旋转木马轮播图（适配移动端）

米柆

已于 2023-07-27 09:20:13 修改

阅读量2.5k

点赞数 1

分类专栏： Millia's work 文章标签：前端 javascript 开发语言

于 2022-08-24 11:24:43 首次发布

本文链接：https://blog.csdn.net/millia/article/details/126500658

版权

Millia's work 专栏收录该内容

58 篇文章 4 订阅

订阅专栏

效果如下：

注：这里引用的是swiper3.0，swiper3.0无需加载公用库：Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等，但基于swiper仍需引入swiper相关的css及js。

css：https://3.swiper.com.cn/dist/css/swiper.min.css

js：https://3.swiper.com.cn/dist/js/swiper.min.js

HTML：

<div class="bigFocus">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="图片地址"></div>
<div class="swiper-slide"><img src="图片地址"></div>
<div class="swiper-slide"><img src="图片地址"></div>
<div class="swiper-slide"><img src="图片地址"></div>
<div class="swiper-slide"><img src="图片地址"></div>
</div>
</div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>

CSS：

.bigFocus .swiper-slide{transition:transform 1.0s;transform:scale(0.8);position:relative;}
.bigFocus .swiper-slide-active{transform:scale(1);z-index:2;}
.bigFocus .swiper-slide img{width:100%;height:100%;border-radius:15px;display:block;}

JS：

  var swiper = new Swiper('.bigFocus .swiper-container', {
	autoplay:3000,
  	speed:1000,
  	autoplayDisableOnInteraction : false,
  	loop:true,
 	centeredSlides : true,
 	slidesPerView:2,
  	spaceBetween: -260,
  	paginationClickable:true,
  	//pagination: ".bigFocus .swiper-pagination",
  	nextButton: '.bigFocus .swiper-button-next',
  	prevButton: '.bigFocus .swiper-button-prev',
  	breakpoints: {
      640: {
      	slidesPerView: 1,
      }
  	}
  });

整合：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>基于swiper实现旋转木马轮播图</title>
<link href="https://3.swiper.com.cn/dist/css/swiper.min.css" rel="stylesheet" type="text/css" />
<style>
/*其他css样式*/
.bigFocus{position:relative;}
.bigFocus .swiper-container{padding:10px 0;}
.bigFocus .swiper-slide{display:flex;justify-content:center;align-items:center;transition:300ms;transform:scale(0.8);opacity:.5;}
.bigFocus .swiper-slide img{width:100%;height:auto;}
.bigFocus .swiper-slide-active{transform:scale(1);z-index:999;opacity:1;}
.bigFocus .swiper-slide-active img{box-shadow:0 0 10px #03206c;border-radius:5px;}
/*其他css样式*/
</style>
</head>
<body>
<div class="millia">
<!--其他HTML结构-->
<div class="bigFocus">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="temp/img760_410_01.jpg"></div>
<div class="swiper-slide"><img src="temp/img760_410_02.jpg"></div>
<div class="swiper-slide"><img src="temp/img760_410_03.jpg"></div>
<div class="swiper-slide"><img src="temp/img760_410_04.jpg"></div>
<div class="swiper-slide"><img src="temp/img760_410_05.jpg"></div>
</div>
</div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<!--其他HTML结构-->
</div>
<script src="https://3.swiper.com.cn/dist/js/swiper.min.js"></script>
<script>
/*其他js*/
  var swiper = new Swiper('.bigFocus .swiper-container', {
	autoplay:3000,
  	speed:1000,
  	autoplayDisableOnInteraction : false,
  	loop:true,
 	centeredSlides : true,
 	slidesPerView:2,
  	spaceBetween: -260,
  	paginationClickable:true,
  	//pagination: ".bigFocus .swiper-pagination",
  	nextButton: '.bigFocus .swiper-button-next',
  	prevButton: '.bigFocus .swiper-button-prev',
  	breakpoints: {
      640: {
      	slidesPerView: 1,
      }
  	}
  });
/*其他js*/
</script>
</body>
</html>