Bootstrap 3.0：向主頁添加了兩個滑塊，兩個都沖突

Question

解決了對於第一個滑塊，我將名稱：carousel-example-generic更改為carousel-example-generic_1以進行區分，這解決了我的問題

我在主頁上使用了2個引導程序滑塊，問題是主0slider正常工作，但是當我單擊第二個滑塊的向左或向右箭頭時，它也為第一個滑塊滑動了圖像，所以有人請指導我如何修復它代碼是這樣的

           <!-- 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

根據getbootstrap手冊，了解slider's component usage ：

輪播需要在最外面的容器（.carousel）上使用id，以使輪播控件正常運行。 添加多個輪播時，或更改輪播ID時，請確保更新相關控件。

因此，如果以下代碼用於一個滑塊：

<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”。

如果滑塊中包含controls ，請確保要更新href值，以便它們指向相關的滑塊。

  <!-- 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>