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

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

Dream luckyจุ๊บ

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

阅读量819

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： swiper插件 tab切换多个轮播图

本文链接：https://blog.youkuaiyun.com/weixin_43925266/article/details/85235539

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,
                })
		});