2014-09-04 59 views
0

我发现了一个完美的工作解决方案,可以解决如何链接到引导程序传送带中的特定幻灯片的问题。不过,我有多个不同ID的轮播在同一页面上运行。我的链接如何针对特定的轮播ID?指向不同引导程序传送带幻灯片的不同链接在一页中

具体信息: 我有三个轮播 它们有不同的ID:“carousel-01”,“carousel-02”,“carousel-03”。

我称这个函数能够链接到特定的幻灯片。这是carousel-01。也可以是旋转木马,03

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

然后我把在标记

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

我的问题是我的链接:如何让我的链接目标与特定ID的传送带。比方说,我不希望#carousel-01移动但是#carousel-03?

回答

2

必须使用不同的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> 
+0

我已经这样做了,但是当我点击我创建的链接时,我怎样才能得到只有carousel2才能滑动? – user3895382 2014-09-04 11:27:50

+0

我希望我的下面的代码帮助你...请检查下面更新的代码。 – 2014-09-05 07:07:16

0

这里是上点击的解决方案,如果“去滑件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 required

<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> 
相关问题