javascript - 自定义 Bootstrap 轮播

Question

以下是我的轮播代码的链接 https://jsfiddle.net/65jbbp2c/2/ 在这里，我希望图像下方的文本与相应的幻灯片一起移动。 这里的问题是文本超出了“myCarousel”的范围。

<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

首先你检查了documentation对于 bootstrap 网站上的标题选项(正是@HenryDev 发布的内容)

否则，如果有帮助，您可以使用此代码:

$('#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>

我刚刚将数据添加到包含图像的项目中，并使用 Bootstrap 中的事件处理程序来管理当前显示的项目并获取数据标题值以显示正确的项目。

这段代码是基本的，但它完成了工作。