swiper轮播图

最新推荐文章于 2025-08-25 21:16:22 发布

原创最新推荐文章于 2025-08-25 21:16:22 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery

前端专栏收录该内容

8 篇文章

订阅专栏

本文展示了如何在HTML中引入swiper.min.js和swiper.min.css库，并利用它们创建一个动态轮播图。通过JavaScript动态生成swiper-slide，设置轮播图的配置，包括自动播放和分页指示器，实现了图片的展示和轮播效果。

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

引swiper.min.js、swiper.min.css

<div class="row">
	<div class="swiper-container">
		<div class="swiper-wrapper" id="swiperWrapper">
			
		</div>
	<div class="swiper-pagination" slot="pagination"></div>
	</div>
</div>

for (var i = 0; i < msg.LIST.length; i++) {
	// 给swiperWrapper放图片
	str += '<div class="swiper-slide"><image style="width:300px;height:150px;margin-top: 5%;" src="???"></image></div>';														
}
$("#swiperWrapper").html("");
$("#swiperWrapper").html(str);
var swiper = new Swiper('.swiper-container',
{
	pagination : {
		el : '.swiper-pagination',
	},
	autoplay: {
                 disableOnInteraction: false,
                 delay: 2000,// 动态轮播时间间隔
             },
});