Question

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

具体内容：我有三个旋转木马他们有不同的ID：＆＃34; carousel-01＆＃34;，＆＃34; carousel-02＆＃34;，＆＃34; carousel-03＆＃34;。

我将该函数称为能够链接到特定幻灯片。这是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

如果“转到幻灯片3”，这就是点击的解决方案，它将采用特定的滑块，例如：现在我将它定位到'＃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>

不同链接到不同的bootstrap轮播在一个页面中滑动

2 个答案: