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

原创

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

收录于

当前文章被以下社区和专栏收录：

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

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

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

效果如下：

注：这里引用的是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="https://blog.csdn.net/%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80"></div>
<div class="swiper-

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