为什么我的 <li> 没有“活跃”？

Question

我的自定义引导轮播有点问题.. 我的<li> 没有上课active...

$(document).ready(function() {
  $(".carousel").carousel({
    interval: 2000
  });
  $(".carousel").on("slid", function() {
    var to_slide;
    to_slide = $(".carousel-item.active").attr("data-slide-no");
    $(".myCarousel-target.active").removeClass("active");
    $(".carousel-indicators [data-slide-to=" + to_slide + "]").addClass("active");
  });
  $(".myCarousel-target").on("click", function() {
    $(this).preventDefault();
    $(".carousel").carousel(parseInt($(this).attr("data-slide-to")));
    $(".myCarousel-target.active").removeClass("active");
    $(this).addClass("active");
  });
});

还有我的小提琴fiddle boot carousel

Answer 1

问题是由于没有一个名为 .myCarousel-target 的类，并且当没有默认事件在普通 li 上运行时，还有一个 preventDefault()。

试试这个 JS：

$(".carousel-indicators li").on("click", function() {
  $(".carousel").carousel(parseInt($(this).attr("data-slide-to")));
  $(".carousel-indicators li.active").removeClass("active");
  $(this).addClass("active");
});

JSFiddle of working example

Answer 2

这是一个更新的 fiddle。我已将块 $(".carousel").on("slid", function() { 重新格式化如下。

$(".carousel").on("slid.bs.carousel", function () {
    var act = $('.carousel-indicators li.active').next();
    if (act[0] == undefined) {
        act = $('.carousel-indicators li:first-child');
    }
    $('.carousel-indicators li').removeClass("active");
    act.addClass("active");
});