Bootstrap Carousel的活動項目issue

我想了解有關this one的bootstrap基礎的輪播。但是，當我試圖讓模擬一個。但它不能用作演示。當用戶點擊另一個<li>時，活動項目無法更改。我試過但仍然沒有弄清楚爲什麼。這是我的HTML：Bootstrap Carousel的活動項目issue

<div class="container"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 

    <ul class="nav nav-pills nav-justified"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li> 
     <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li> 
     <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li> 
    </ul> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="http://placehold.it/1200x400/cccccc/ffffff" /> 
     </div> 
     <!-- End Item --> 

     <div class="item"> 
     <img src="http://placehold.it/1200x400/999999/cccccc"> 
     </div> 
     <!-- End Item --> 

     <div class="item"> 
     <img src="http://placehold.it/1200x400/dddddd/333333"> 
     </div> 
     <!-- End Item --> 
    </div> 
    <!-- End Carousel Inner --> 

    </div> 
</div>

我的JS：

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
    interval: 4000 
    }); 
    $('#myCarousel.nav a').on('click', function() { 
    clickEvent = true; 
    $('.nav li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    }); 
});

有人能告訴我什麼是錯的？我仍然是這個jquery的新手。在他的演示，他爲什麼用這樣的：

$('#myCarousel').on('click', '.nav a', function() {...});

我想我們只能用：

$('#myCarousel').on('click',function(){...});

這是我從Jquery click()

瞭解到這是我source

來源

2017-01-02 Hanata

我忘了添加自定義的'js'。對不起所有人，感謝您的幫助。 – Hanata

您正在嘗試使用類.nav作爲#myCarousel的元素，但是您的類在該i下d。因此，要定位錨標記，您必須通過在選擇器之間放置空格來告訴#myCarousel，並找到類.nav的孩子。

Fiddle

更改此

$('#myCarousel.nav a')

到

$('#myCarousel .nav a')

上選擇你的問題，檢查這個問題link

來源

2017-01-02 05:55:59 Afsar

我改變了我的建議。但還是不能更換輪播的有效項目 – Hanata

檢查小提琴。 – Afsar

我也複製了你的代碼。但我不會工作。我不知道爲什麼。它仍然不能更改活動項目，主動滑塊仍然運行良好。 – Hanata

您好我試過同樣js和創造了這個Fiddle它對我來說工作正常

請檢查並讓我知道。

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
    interval: 4000 
    }); 

    var clickEvent = false; 
    $('#myCarousel').on('click', '.nav a', function() { 
      clickEvent = true; 
      $('.nav li').removeClass('active'); 
      $(this).parent().addClass('active');   
    }).on('slid.bs.carousel', function(e) { 
     if(!clickEvent) { 
      var count = $('.nav').children().length -1; 
      var current = $('.nav li.active'); 
      current.removeClass('active').next().addClass('active'); 
      var id = parseInt(current.data('slide-to')); 
      if(count == id) { 
       $('.nav li').first().addClass('active');  
      } 
     } 
     clickEvent = false; 
    }); 
});

來源

2017-01-02 06:56:50 ilmk

Bootstrap Carousel的活動項目issue

回答

相關問題