javascript - Bootstrap 3.0 : added 2 sliders to home page both conflicting

Question

已解决 对于第一个 slider ，我将名称 :carousel-example-generic 更改为 carousel-example-generic_1 以进行区分，这解决了我的问题

我在我的主页上使用 2 个 Bootstrap slider ，问题是主 0slider 工作正常但是当我单击第二个 slider 的向左或向右箭头时，第二个 slider 也为第一个 slider 滑动图像，所以有人会指导我如何做修复它我的代码是这样的

           <!-- Wrapper for slides -->
           <div class="carousel-inner rightslider" role="listbox"  >
             <div class="item active">
                <div align="middle">
                    <img src="http://img6a.flixcart.com/image/iron/y/c/t/pigeon-favourite-750-w-favourite-750-w-400x400-imadzkdzyqx6yd9r.jpeg" width="80%" height="100" alt="" title="" border="0">
                </div>
                <div align="middle" class="coupon_title">
                    <a class="coupon_title" href="http://aaa.php?id=8&amp;c=65" target="_blank"><b>Pigeon Favourite 750 W Dry Iron</b></a>
                </div>
                <div class="coupon_price" align="middle"> 
                    <div class="price-old">&#8377;645</div>
                    <div class="price-new">&#8377;399</div>
                </div>
                 <div class="text-center">
                    <a class="btn btn-default " href="">Use Coupon
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                    </a>
                 </div><br>
             </div> 

Answer 1

根据 slider's component usage 的 getbootstrap 手册:

Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.

因此，如果以下代码用于一个 slider :

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->

  <!-- Wrapper for slides -->

  <!-- Controls -->
</div>

对于另一张幻灯片，您应该有不同的 ID，例如: id="carousel-example-generic2"。

请记住，您应该使用更相关的名称，例如:“news-carousel”或“main-slideshow”。

如果您的 slider 中有控件，请确保您正在更新href 值，以便它们指向相关的 slider 。

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" [<--] role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" [<--] role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>