Jquery Boostrap Carousel Show Content According To Current Slide

I am using bootstrap jquery carousel to slide content. I also have some content below the carousel. This content should hide/show according to which slide is showing. Since bootstr

Solution 1:

There are tons of ways to implement this. Depending on what version of bootstrap you are running, you can use the slid, slide or slide.bs.carousel.

Bootstrap Versions before 3

You can try this (depending on what version of bootstrap you are running), with the slid function, it detects when the slide event is completed:

$("#myCarousel").carousel()
 $("#myCarousel").bind("slid", function(){
    $currentActive = $("#myCarousel .active").attr('id');
       if($currentActive == "item1"){
           //then show something
       }elseif(...){....}
  })

using the slide and the slid event you can find current slide and the next slide/target slide, this solution hasn't been tested yet but it should work fine.

$('.carousel').on('slide',function(e){
    var slideFrom = $(this).find('.active').index();
    var slideTo = $(e.relatedTarget).index();
    if(slideTo == 1){
       //do something for item one, realise here i am working with indexes
    }
});

In bootstrap 3:

$('#myCarousel').on('slide.bs.carousel', function (e) {
  //according to the documentation this event is fired when the slide method is invokedvar slideFrom = $(this).find('.active').index();
    var slideTo = $(e.relatedTarget).index();
    if(slideTo == 1){
       //do something for item one, realise here i am working with indexes
    }
})

---

Update

Why not give your success-content children div ids and instead of using the class to identify them, you use their individual ids. for example:

<divid="success-content"><divclass="success1 active"id="successOne"><h4class="rounded-heading">Eleanor's Story</h4><p><spanclass="quote-start"></span>
                             Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. comes from a line in section 1.10.32.
                        <spanclass="quote-finish"></span></p><p>
                        Isobel Leeds)
                    </p><p>
                        All case studies are genuine photographs and un-retouched case studies of our own patients treated in our own clinics. (Reproduced with their consent)
                    </p></div><!-- end success1 --><divclass="success2"id="successTwo"><h4class="rounded-heading">Melsor's Story</h4><p><spanclass="quote-start"></span>
                             Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. comes from a line in section 1.10.32.
                        <spanclass="quote-finish"></span></p><p>
                        Isobel Leeds)
                    </p><p>
                        All case studies are genuine photographs and un-retouched case studies of our own patients treated in our own clinics. (Reproduced with their consent)
                    </p></div></div><!-- end success-content --></div><!-- end success-stories -->