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

原创已于 2024-12-02 14:23:25 修改 · 2.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

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

Millia‘s work 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了如何使用Swiper 3.0版本创建响应式轮播图，无需引入额外的jQuery库，只需CSS和JS文件，适合快速开发。通过实例展示了HTML结构、CSS样式和JS配置，适合开发者作为轻量级轮播图解决方案参考。

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

效果如下：

注：这里引用的是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="swiperBox">
<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"></div>
<div class="swiper-button-prev"></div>
</div>


<!--同页面的其他相同重复-->
<div class="swiperBox">
<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"></div>
<div class="swiper-button-prev"></div>
</div>

CSS：

.swiperBox .swiper-slide{transition:transform 1.0s;transform:scale(0.8);}
.swiperBox .swiper-slide-active{transform:scale(1);z-index:2;}
.swiperBox .swiper-slide img{width:100%;height:100%;}

/*更多堆叠 注意transform:scale()和z-index的值*/
.swiperBox .swiper-slide{transition:transform 1.0s;transform:scale(0.6);z-index:0;}
.swiperBox .swiper-slide-prev,.swiperBox .swiper-slide-next{transform:scale(0.8);z-index:1;}
.swiperBox .swiper-slide-active{transform:scale(1);z-index:2;}

JS：

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


//多个调用
$(".swiperBox").each(function(index){
  let slidesPerViewNum
  if(index == 0){
    slidesPerViewNum = 2 //根据调用顺序设置堆叠个数
  }
  if(index == 1){
    slidesPerViewNum = 3 //根据调用顺序设置堆叠个数
  }
  $(this).addClass("swiperBox"+index);
  var smallSwiper = new Swiper(".swiperBox"+index+" .swiper-container", {
    pagination:".swiperBox"+index+" .swiper-pagination",
    nextButton:".swiperBox"+index+" .swiper-button-next",
    prevButton:".swiperBox"+index+" .swiper-button-prev",
    autoplay:3000,
    speed:1000,
    autoplayDisableOnInteraction:false,
    loop:true,
    centeredSlides:true,
    slidesPerView:slidesPerViewNum,
    spaceBetween:-260,
    paginationClickable:true,
    breakpoints:{
      640: {
        slidesPerView:1,
      }
    }
  });
})