title: background changing carousel help for my local carousel in Twitter Bootstrap
body: <p>I am trying to make the second Carousel (with solutions and all and with changing background color) in Twitter Bootstrap as shown in :-<a href="http://solutions.mckinsey.com/index/" rel="nofollow">http://solutions.mckinsey.com/index/</a></p>
  
  <p>I am not sure that how the background changing part is being handled. Could you guys help me in it.</p>
  
  <p>This is what I did with my current Carousel:-</p>
  
  <pre><code>&lt;div class="personalized-carousel-module media-module"&gt;
  
  
              &lt;div id="myCarouselforthis" class="carousel slide"&gt;
                &lt;div class="carousel-inner carousel-inner-at-home"&gt;
  
  
                  &lt;div class="item active" id="home-carousel-inner"&gt;
                    &lt;a href="/myfirstlink/index.html"&gt;
                          &lt;div class="some-class"&gt;&lt;/div&gt;
                          &lt;span&gt;Title&lt;/span&gt;
                      &lt;/a&gt;
  
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                        &lt;a href="/myfirstlink2/index.html"&gt;
                          &lt;div class="some-class2"&gt;&lt;/div&gt;
                          &lt;span&gt;Title2&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                    &lt;img src="media/sample-image.jpg" alt=""&gt;
  
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;a class="arrow arrow-left hidden-phone" href="#myCarouselforthis" data-slide="prev"&gt;&lt;/a&gt;
                &lt;a class="arrow arrow-right hidden-phone" href="#myCarouselforthis" data-slide="next"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  </code></pre>
  
  <h2>EDIT</h2>
  
  <p>While looking at the code, I realised, that it's being done through <code>&lt;div class="solution-preview" value="primary-two-background"&gt;</code>. Can I anyone explain, how the <code>value</code> element of div makes it change the colors?</p>
  
  <pre><code>    &lt;ul&gt;
          &lt;li&gt;
              &lt;div class="solution-preview" value="primary-two-background"&gt;
                  &lt;a href="/Index/solutions/periscope/"&gt;
                      &lt;h2&gt;Periscope&lt;/h2&gt;
                  &lt;/a&gt;
                  &lt;p&gt;
  Improves return on sales through better pricing, promotions, assortment, and performance management &lt;/p&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="solution-preview" value="primary-five-background"&gt;
                  &lt;a href="/Index/solutions/objective-health/"&gt;
                      &lt;h2&gt;Objective Health&lt;/h2&gt;
                  &lt;/a&gt;
                  &lt;p&gt;
  Supports community hospitals and small regional systems to improve their cost performance and strategy &lt;/p&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <h2>Work Done uptill now</h2>
  
  <p>So, by using CSS and JS from the same site for the learning purposes, I did the following:-</p>
  
  <pre><code>&lt;div class="module colored home-solutions primary-two-background"&gt;
  
  
              &lt;div id="myCarouselforsolutions" class="carousel slide"&gt;
                &lt;div class="carousel-inner carousel-inner-at-home"&gt;
  
  
                     &lt;div class="content-container"&gt;
  
                          &lt;h1 id="num-solutions"&gt;&lt;/h1&gt;
                          &lt;h2&gt;SOLUTIONS&lt;/h2&gt;
                          &lt;div id="swipe-container-home-solutions"&gt;
  
                              &lt;div class="item active" id="solutions-slide-dimensions"&gt;
  
                                  &lt;div class="solution-preview" value="primary-two-background"&gt;
                                      &lt;a href="/Index/solutions/periscope/"&gt;
                                          &lt;h2&gt;Periscope&lt;/h2&gt;
                                      &lt;/a&gt;
                                      &lt;p&gt;
                                          Improves return on sales through better pricing, promotions, assortment, and performance management &lt;/p&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
  
                               &lt;div class="item" id="solutions-slide-dimensions"&gt;
  
                                  &lt;div class="solution-preview" value="primary-five-background"&gt;
                                      &lt;a href="/Index/solutions/objective-health/"&gt;
                                          &lt;h2&gt;Objective Health&lt;/h2&gt;
                                      &lt;/a&gt;
                                      &lt;p&gt; Supports community hospitals and small regional systems to improve their cost performance and strategy&lt;/p&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
  
  
  
                          &lt;/div&gt;
  
                    &lt;/div&gt;
  
  
  
                &lt;/div&gt;
                &lt;a class="arrow arrow-left hidden-phone" href="#myCarouselforsolutions" data-slide="prev"&gt;&lt;/a&gt;
                &lt;a class="arrow arrow-right hidden-phone" href="#myCarouselforsolutions" data-slide="next"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
  
  
          &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that it does look fine layout wise, but the slider for the carousel is not working ... and I am unable to figure out.</p>
  
  <h2>SOLUTION</h2>
  
  <p>Did it something like this:-</p>
  
  <p>So I did it something like this:-</p>
  
  <pre><code>$('#myCarouselforsolutions').carousel({
            interval: 3000
          });
  
          var slideFrom;
          var slideTo;
          $('#myCarouselforsolutions').on('slide',function(e){
              slideFrom = $(this).find('.active').index();
              slideTo = $(e.relatedTarget).index();
  
  
              if (typeof slideTo == "undefined") {
                  slideTo = 2;
              }
              //console.log ("slide To " + slideTo + " and From " + slideFrom);
              $('.media-module').removeClass('primary-one-background')
                                  .removeClass('primary-two-background')
                                  .removeClass('primary-three-background')
                                  .removeClass('primary-four-background')
                                  .removeClass('primary-five-background')
                                  .addClass($(solution_list[slideTo]).attr('value'));
              });
  
  
  
              $("#prev-solution, #next-solution").click(function(e) {
                  //e.preventDefault();
  
  
          });
  </code></pre>
  
  <p>Only thing I wanna achieve is to make it slide rather than just fade out, fade in (in IE).
  Thanks.</p>