Condition for bootstrap carousel

Question

I would like to add a condition for the item who has the class ".active".

Based on this model : Bootstrap vertical slider

if($(".carousel.vertical .item").is(".active"))
        $(".carousel .active").css("border","2px solid black");
});

Answer 1

You don't need to use jQuery to achieve this. You can just apply a css style.

.item.active {
    border:solid 2px #000;
}

Whenever the new item becomes active, that style will be applied to the newly active element and removed from the others.

This fiddle isn't as clean as your original link, but it shows the code in action:

http://jsfiddle.net/wqavm8zt/

UPDATE using jQuery:

The syntax you have in your post is a bit off, you're missing an opening bracket:

if($(".carousel.vertical .item").is(".active")) {
    $(".carousel .active").css("border","2px solid black");
};

However, that is still only going to load the styles on the item that is already loaded in the DOM. It will not be applied when classes change.

Answer 2

You can try

if($(".carousel.vertical .item").hasClass("active"))
    $(".carousel .active").css("border","2px solid black");
});