Change background when active class changes on Bootstrap Carousel

Question

I wanted to change the background of a container every time the slider slides. I figure I need to check if/ when the class of the item because active. I also wonder if there isn't an event for which I should be listening. Here's the jsfiddle I'm working on:

https://jsfiddle.net/podbarron/nj04xms5/

$(function(){
$('#carousel-indicators').on('click', 'li', function(){

});
});

Thanks!

Answer 1

Bootstrap Carousel has an event which fires on/after each slide transition. You should be able to use this.

Example: https://jsfiddle.net/nj04xms5/7/

The js inside the event is very basic but just to give you an idea.

e.relatedTarget will get you the current slide you are on if you wanted to get information from it (i.e. the ID)

$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
      if(e.relatedTarget.id == 'firstSlide'){
          $("#landingContainer").css('background-color', 'orange');
      } else if(e.relatedTarget.id == 'secondSlide'){
          $("#landingContainer").css('background-color', 'green');
      }
})