一页中指向不同引导轮播幻灯片的不同链接

Question

对于如何链接到引导轮播中的特定幻灯片的问题，我找到了一个完美的解决方案。但是，我在同一页面上运行了多个具有不同 ID 的轮播。我的链接如何定位特定的轮播 ID？

具体情况： 我有三个旋转木马 它们有不同的 id：“carousel-01”、“carousel-02”、“carousel-03”。

我调用该函数是为了能够链接到特定的幻灯片。这里是 carousel-01。也可以是carousel-03

function goToSlide(number) {$("#carousel-01").carousel(number);}

然后我把我的链接放在标记中

<a href="#" onClick="javascript:goToSlide(2);">Go to slide #5</a>

我的问题是：如何使链接以具有特定 ID 的轮播为目标。比方说，我想要的不是#carousel-01 移动，而是#carousel-03？

Answer 1

你必须为这两个轮播使用不同的ID

<!--carousel one -->

    <div id="carousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div><!--end of carousel one -->

<!--carousel two -->

    <div id="carousel2" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel2" data-slide-to="0" class="active"></li>
        <li data-target="#carousel2" data-slide-to="1"></li>
        <li data-target="#carousel2" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div><!--end of carousel two -->

然后通过javascript调用轮播

   <script>
         //for carousel one
         $('#carousel').carousel()
         //for carousel two
         $('#carousel2').carousel()

    </script>

Answer 2

如果“转到slide3”，这是单击时的解决方案，它将采用特定的滑块，例如：现在我将其定位到“#carousel2”中的“slidehere”类

    <!-- link to specific slider -->
    <a href="#" class="slide3">Go to slide3</a>

        <!--carousel one -->

    <div id="carousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div><!--end of carousel one -->

<!--carousel two -->

    <div id="carousel2" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel2" data-slide-to="0" class="active"></li>
        <li data-target="#carousel2" data-slide-to="1"></li>
        <li data-target="#carousel2" data-slide-to="2" class="slidethis"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>

        <div class="item slidethis">  <!-- targeted item on click 'slidethis'-->
          <img src="..." alt="...">
          <p>slide</p>
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel2" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#carousel2" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div><!--end of carousel two -->

需要javascript

 <script>

         //for carousel one
         $('#carousel').carousel()
         //for carousel two

         $('.slide3').click(function() { //onclick

            /* Act on the event */

            $('#carousel2 .carousel-inner .slidethis').siblings().removeClass('active');//removes active class from siblings
            $('#carousel2 .carousel-inner .slidethis').addClass('active') //adding active class to targeted slide
            $('#carousel2 .carousel-indicators .slidethis').siblings().removeClass('active');//removes active class from siblings
          $('#carousel2 .carousel-indicators .slidethis').addClass('active')/adding active class to targeted slide

         });
        </script>