bootstrap轮播点不动

最新推荐文章于 2023-02-04 16:17:40 发布

转载最新推荐文章于 2023-02-04 16:17:40 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/583531/blog/3036312

文章标签：

#python

本文详细介绍了如何解决页面中使用两个轮播图时出现的指示点失效问题，提供了修改轮播ID和相应属性以确保正常运行的具体代码示例。

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

2019独角兽企业重金招聘Python工程师标准>>>

页面中用了2个轮播后，轮播点不动了？

解决办法如下：

如果复制的框架的代码过来，你页面中需要做2个轮播，你就会改掉原有的轮播id，那么记得将我红色部分都改成一致的。

PC端轮播

<div class="container-fluid container-clear hidden-xs hidden-sm">
           <div id="pc-carousel" class="carousel slide">
           
           <ol class="carousel-indicators">
           <li data-target="#pc-carousel" data-slide-to="0"
           class="active"></li>
           <li data-target="#pc-carousel" data-slide-to="1"></li>
           <li data-target="#pc-carousel" data-slide-to="2"></li>
           </ol>
           
           <div class="carousel-inner">
           <div class="item active">
           <img src="img/top-banner-01.jpg" alt="First slide">
           </div>
           <div class="item">
           <img src="img/top-banner-02.jpg" alt="First slide">
           </div>
           <div class="item">
           <img src="img/top-banner-03.jpg" alt="First slide">
           </div>
           </div>
           
       <a class="left carousel-control" href="#pc-carousel" role="button" data-slide="prev">
       <span class="icon-arrow-left glyphicon-chevron-left" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
       </a>
       <a class="right carousel-control" href="#pc-carousel" role="button" data-slide="next">
       <span class="icon-arrow-right glyphicon-chevron-right" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
       </a>
           </div>
       </div>

移动端轮播
       <div class="container-fluid container-clear hidden-md hidden-lg">
           <div id="mb-carousel" class="carousel slide">
           
           <ol class="carousel-indicators">
           <li data-target="#mb-carousel" data-slide-to="0"
           class="active"></li>
           <li data-target="#mb-carousel" data-slide-to="1"></li>
           </ol>
           
           <div class="carousel-inner">
           <div class="item active">
           <img src="img/trade-m-banner-01.jpg" alt="First slide">
           </div>
           <div class="item">
           <img src="img/trade-m-banner-01.jpg" alt="First slide">
           </div>
           </div>
           
       <a class="left carousel-control" href="#mb-carousel" role="button" data-slide="prev">
       <span class="icon-arrow-left glyphicon-chevron-left" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
       </a>
       <a class="right carousel-control" href="#mb-carousel" role="button" data-slide="next">
       <span class="icon-arrow-right glyphicon-chevron-right" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
       </a>
           </div>
       </div>