sairaj sairaj - 5 months ago 32
Javascript Question

Customise Bootstrap Carousel

Following is the link to my carousel code
https://jsfiddle.net/65jbbp2c/2/
Here I want the text below the image to move along with the respective slide.
The problem here is the text is out side "myCarousel"s scope.

<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner text-center" role="listbox">
<div class="item active">
<img src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
</div>

<div class="item">
<img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
</div>

<div class="item">
<img src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Flower" width="400" height="200">
</div>

<div class="item">
<img src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Flower" width="400" height="200">
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<div id="slideCapstion" class="text-center">
<div class="side1">
side1 text
</div>
<div class="side2">
side2 text
</div>
<div class="side3">
side3 text
</div>
<div class="side4">
side4 text
</div>
</div>
</div>

Answer Source

First of all did you check the documentation for the caption option on bootstrap website (exactly what @HenryDev posted)

Otherwise you can use this code if it helps :

$('#myCarousel').on('slide.bs.carousel', function (e) {
	// Hide all caption
   $('div#slideCapstion div').addClass('hidden');
   // Show the specific caption associated to the image
  $('div#slideCapstion div.' + e.relatedTarget.dataset.caption).removeClass('hidden');
})
<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner text-center" role="listbox">
      <div class="item active" data-caption="side1">
        <img src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
      </div>

      <div class="item" data-caption="side2">
        <img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
      </div>
    
      <div class="item" data-caption="side3">
        <img src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Flower" width="400" height="200">
      </div>

      <div class="item" data-caption="side4">
        <img src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Flower" width="400" height="200">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  
  <div id="slideCapstion" class="text-center">
  	<div class="side1">
  side1 text
  </div>
  <div class="side2 hidden">
  side2 text
  </div>
  <div class="side3 hidden">
  side3 text
  </div>
  <div class="side4 hidden">
  side4 text
  </div>
  </div>
</div>

I just added data to your item containing the images and used the event handler from bootstrap to manage the current item shown and get the data-caption value to show the right one.

This code is basic but it does the job.