解决swiper插件，tap跳转和一个页面多个demo的问题

最新推荐文章于 2023-02-13 14:56:28 发布

原创最新推荐文章于 2023-02-13 14:56:28 发布 · 819 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swiper插件 #tab切换 #多个轮播图

web前端专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍使用HTML、CSS及JavaScript结合Swiper库实现轮播图的方法，包括自动播放、循环轮播、小圆点导航等功能，适用于网页设计中常见需求。

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

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
           <div class="swiper-slide">
           	<div class="item">
			<img src="__CDN__/uploads/home/aboutCaving/img3.jpg" alt="" />			
		</div>
           </div>
           <div class="swiper-slide">
           	<div class="item">
			<img src="__CDN__/uploads/home/aboutCaving/img3.jpg" alt="" />				
		</div>
           </div>
           <div class="swiper-slide">
           	<div class="item">
			<img src="__CDN__/uploads/home/aboutCaving/img3.jpg" alt="" />			
		</div>
           </div>
       </div>
       <div class="swiper-pagination" id="swiper-p1"></div>
   </div>

var mySwiper = new Swiper(".swiper-container",{
                    autoplay:3000,//每秒中轮播一次
                    loop:true,//可以让图片循环轮播
                    autoplayDisableOnInteraction:false,//在点击之后可以继续实现轮播
                    pagination:".swiper-pagination",//让小圆点显示
                    paginationClickable:true,//实现小圆点点击
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
 					observeParents:true,
                })
		});