CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcarousel
angelilo_
angelilo_

Reputation: 143

Why my <li> doesn't get "active"?

Just a little problem with my custom bootstrap carousel.. My <li> doesn't get class 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");
  });
});

and my fiddle fiddle boot carousel

Upvotes: 0

Views: 86

Answers (2)

Pugazh
Pugazh

Reputation: 9561

Here is an updated fiddle. I have reformatted the block $(".carousel").on("slid", function() { as below.

$(".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");
});

Upvotes: 0

Stewartside
Stewartside

Reputation: 20905

The problem was due to not having a class called .myCarousel-target and also for having a preventDefault() when there is no default event to run on a normal li.

Try this JS out:

$(".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

Upvotes: 1

Related Questions