CODEWITHSUNDEEP
jquerytwitter-bootstrapcontainerscarousel
PudparK
PudparK

Reputation: 111

Change background when active class changes on Bootstrap Carousel

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!

Upvotes: 2

Views: 2975

Answers (4)

PudparK
PudparK

Reputation: 111

$(function(){
    $('#target1').on('click', function(){
        $('#landingContainer').css('background-color', 'green');
    });
});

Upvotes: 0

nthall
nthall

Reputation: 2915

Bootstrap fires events on carousel transitions, which is the first way you could improve this. IMHO the second big improvement would be to avoid a verbose if/else statement and define the target color on each slide, like I've done in this fiddle

JS

$(function(){
    $('.carousel').on('slide.bs.carousel', function(event) {
        color = $(event.relatedTarget).attr('data-new-color');
        if (color) {
            $('#landingContainer').css('background-color', color)
        }
    })
});

sample carousel element

<div id="secondSlide" class="item" data-new-color="blue">
  <img src="http://dummyimage.com/1080x400/0011ff/000" alt="...">
  <div class="carousel-caption">
    ...
  </div>
</div>

Upvotes: 2

ameenulla0007
ameenulla0007

Reputation: 2683

var randomColors    = ["green", "red", "white"];
var clrI    = 0;
$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
    $(this).css('background-color', randomColors[clrI]);
    clrI++;
    if(clrI>=randomColors.length) {
        clrI    = 0;
    }
});

you could use array to define colors, and apply those orderly..

Upvotes: 1

haxtbh
haxtbh

Reputation: 3532

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');
      }
})

Upvotes: 7

Related Questions