Customise Bootstrap Carousel

Question

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 1

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.

Answer 2

Here's a working solution. Hope it helps!

    jQuery(function ($) {
        $('.carousel').carousel();
        var caption = $('div.item:nth-child(1) .carousel-caption');
        $('.information').html(caption.html());
        caption.css('display', 'none');

        $(".carousel").on('slide.bs.carousel', function (evt) {
            var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index() + 1) + ') .carousel-caption');
            $('.information').html(caption.html());
            caption.css('display', 'none');
        });
    });

 .container, .information {
            width: 600px;
            margin: auto;
            color: #000;
        }

        .carousel-caption {
            color: #000;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>
            <li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>
            <li data-target="#carousel-example-captions" data-slide-to="3" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" src="https://static.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg" alt="Chania" width="400" height="200">
                <div class="carousel-caption">
                    <h3>side 1 text</h3>
                </div>
            </div>
            <div class="item">
                <img data-src="holder.js/900x500/auto/#666:#666" alt="900x500" src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/1404/1404088-bigthumbnail.jpg" alt="Chania" width="400" height="200">
                <div class="carousel-caption">
                    <h3>side 2 text</h3>
                </div>
            </div>
            <div class="item">
                <img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500" src="https://static.pexels.com/photos/55813/geranium-wave-water-rings-55813.jpeg" alt="Chania" width="400" height="200">
                <div class="carousel-caption">
                    <h3>side 3 text</h3>
                </div>
            </div>
            <div class="item">
                <img data-src="holder.js/900x500/auto/#555:#5555" alt="900x500" src="http://tsikave.ostriv.in.ua/images/publications/4/15434/1364988835.jpg" alt="Chania" width="400" height="200">
                <div class="carousel-caption">
                    <h3>side 4 text</h3>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>
<div class="information"></div>