Display different content per slide in Bootstrap 3 Carousel

Question

I am making a site using Bootstrap 3 and I am trying to have different text display below certain slides in the carousel when they are shown on the screen. My code is as follows...

<div class="row img-slider">    
<div class="col-md-10 col-md-offset-1">
    <div id="sticksCarousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#sticksCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#sticksCarousel" data-slide-to="1"></li>
            <li data-target="#sticksCarousel" data-slide-to="2"></li>
        </ol>
        <section class="carousel-inner">
            <div class="item active"><img class="image1" src="img/slide1.png" alt="blah" style="width:100%;"></div>
            <div class="item"><img class="image2" src="img/slide2.png" alt="blah" style="width:100%;"></div>
            <div class="item"><img src="img/slide3.png" alt="blah" style="width:100%;"></div>
        </section><!--carousel-inner-->
<a href="#sticksCarousel" class="left carousel-control" data-slide="prev"><span   class="glyphicon glyphicon-chevron-left"> </span></a> <a href="#sticksCarousel" class="right    carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!--sticksCarousel-->
    <p id="sticksCarouselMessage">HEY!</p>
</div>

JavaScript:

<script type = "text/javascript"> 
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 4000
    });
    $('#sticksCarousel').on('slid.bs.carousel', function () {
        if ($('div.active img.image1')) {
            $("#sticksCarouselMessage").text("It worked for Image 1 class!");
        }
        if ($('div.active img.image2')) {
            $("#sticksCarouselMessage").text("It worked for Image 2 class!");
        } else {
            $("#sticksCarouselMessage").text("");
        }
    });
}); 
</script>

I'm trying to select each individual image using JQuery and displaying different text in the #sticksCarouselMessage. I know this isn't probably the most efficient way of doing this, and if you have any suggestions please let me know. Keep in mind I am new to jQuery but I'm trying to learn. Thanks!

score 1 · Accepted Answer · edited Sep 27 '13 at 06:08

Your check is one issue:

       if ($('div.active img.image1')) {
            $("#sticksCarouselMessage").text("It worked for Image 1 class!");
        }
        if ($('div.active img.image2')) {
            $("#sticksCarouselMessage").text("It worked for Image 2 class!");
        } else {
            $("#sticksCarouselMessage").text(""); //this will mostly always execute
        }

Here just checking for the object is not sufficient as jquery does not return null/ undefined if object is not found, it return a jquery object which is truthy so always it goes inside your first if condition set the text and then there is no else condition so if it is not image 2 then it always goes to else of that and sets nothing. Instead try this way:

var $msg = $("#sticksCarouselMessage"); //Cache the object here so you dont want to use it again
$('#sticksCarousel').on('slid.bs.carousel', function () {

    var text = "", $active = $('div.active'); //set initial value of the text, and cache active div
    if ($active.has('img.image1')) { //find if active has image1 if so set the text
        text = "It worked for Image 1 class!";
    } else if ($active.has('img.image2')) { //else find if active has image2 if so set the text
        text = "It worked for Image 2 class!";
    }

    $msg.text(text); //endof it set the message to the element with the text populated above

});

Fiddle

You can also simplify it to:

var arrMessages = ["It worked for Image 1 class!",  //set your messages here in an array
                   "It worked for Image 2 class!",
                   "It worked for Image 3 class!"]

var $msg = $("#sticksCarouselMessage");
$('#sticksCarousel').on('slid.bs.carousel', function () {

    var text = "", 
         $active = $('div.active'),
         index = $('div.item').index($active); //check the index of active item

    $msg.text(arrMessages[index] || "Some Default text if nothing to display for this slide"); //fetch the value from array based on the index of the item and display.

});

Fiddle

Awesome PSL thanks! Do you mind spending a couple minutes and explain exactly what you did above? I'm still learning jQuery and it would be really helpful, I hate just copy and pasting code without know exactly whats happening. — Jacob Buller, Sep 26 '13 at 03:37
@JacobBuller updated the answer as well to make it better and explain it. One question do you have only three slides of so if condition is ok otherwise need to make it dynamic to make it more efficient and readable. Please do mark as answer if this helped you.. — PSL, Sep 26 '13 at 03:41

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

Use the slide number (index) to change your message, like:

var arrMessages = ["It worked for Image 1 class!",  
                   "It worked for Image 2 class!",
                   "It worked for Image 3 class!"]

/*initialization*/
$('#sticksCarouselMessage').text(arrMessages[0]);
$('#sticksCarousel').carousel();
/**/


$("#sticksCarousel").on('slid.bs.carousel', function(evt) {
$('#sticksCarouselMessage').text(arrMessages[$(this).find('.active').index()]);
});

finding active index: https://stackoverflow.com/a/18690905/1596547

See: http://bootply.com/83418

edited May 23 '17 at 11:56

Community

1
1

answered Sep 26 '13 at 17:54

Bass Jobsen

48,736
16
143
224

Hey Bass can you explain what you did in the above jQuery? It worked perfectly I just don't really understand whats going on and I am trying to learn jQuery. Why is .carousel method being called twice? Also how are you referencing the index of the message based on the carousel image being displayed? – Jacob Buller Sep 27 '13 at 04:38
This is a clone of my answer with just initialization and slight modification (which i split up for readability) to set initial text, which you had set hi and i used in my answer. You dont need to call carousel() twice. It doesn't do any magic. Plus more inefficient due to repetition of selectors and creation of jquery object which can be cached. – PSL Sep 27 '13 at 04:41
@PSL although not intend, i understand you point about cloning. Excuse me. – Bass Jobsen Sep 27 '13 at 06:12
so to clarify the .find method finds which div has class active in the div with id #sticksCarousel then finds the index of that div and assigns it to index of the string for arrMessage that is then assigned to the text of div with id sticksCarouselMessage? – Jacob Buller Sep 28 '13 at 16:24
yes that's right For better understanding read http://api.jquery.com/find/, http://api.jquery.com/index/ and http://www.w3schools.com/js/js_obj_array.asp – Bass Jobsen Sep 28 '13 at 17:51

Display different content per slide in Bootstrap 3 Carousel

2 Answers2