Bootstrap carousel and show display different text accordingly to current slide

Question

I have a bootstrap carousel and I want to display a text accordingly to slides in the paragraph under the carousel. Is there any jquery way how to do that?

ie. first slide, text "Hi!"; second slide, "Lorem ipsum dolor sit amet..."

my carousel:

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">                
                    <div class="item active">
                      <img src="img/krok_02.png" alt="ommo 2">
                    </div>

                    <div class="item">
                      <img src="img/krok_03.png" alt="ommo 3">
                    </div>

                    <div class="item">
                      <img src="img/krok_04.png" alt="ommo 4">
                    </div>
                  </div>

                  <!-- Left and right controls -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon-chevron-left" aria-hidden="true"><img src="img/sipka_leva.png" alt="<"></span>
                    <span class="sr-only">Předchozí</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon-chevron-right" aria-hidden="true"><img src="img/sipka_prava.png" alt=">"></span>
                    <span class="sr-only">Následující</span>
                  </a>
                </div>

And I want to display the text into a paragraph with an id "text".

I have found this topic, but I'm not clever from that, anybody could explain me how to make it? I'm new to jquery and I would really appreciate it.

jQuery Boostrap Carousel Show content according to current slide

entiendoNull entiendoNull · Accepted Answer · 2015-11-05T18:58:18

Now haveing better understanding of your issue you could do it like this:

http://jsfiddle.net/0k69gusw/

Each time a slide transition is completed we will add the text in the carousel-caption to a custom div with the id text. I understood it that way you didn't want the capture to be shown within the slide, thus it's simply hidden with css.

$('.carousel').on('slid.bs.carousel', function () {
   $('#text').html($('.active > .carousel-caption').html());
   });

First reply:

Add a div with the class carousel-caption to your item (as shown below). Within that div you put the text to be shown together with the image.

From bootstrap website: http://getbootstrap.com/javascript/#carousel

<div class="item active">
   <img src="img/krok_02.png" alt="ommo 2">
   <div class="carousel-caption">
      Your text goes here..
   </div>
</div>

Bootstrap carousel and show display different text accordingly to current slide

1 Answers