所以我需要更改不同列中某些内容的文本,这取决于哪个幻灯片处于活动状态。我似乎无法弄清楚我在哪里出错了。 HTML:
<div class="col-sm-6">
<h1>Recent News</h1>
<p id="CarouselMessage">Hello World</p>
</div><!-- Column 6 -->
<div class="col-sm-6">
<div id="Carousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#Carousel2" data-slide-to="0" class="active"></li>
<li data-target="#Carousel2" data-slide-to="1"></li>
<li data-target="#Carousel2" data-slide-to="2"></li>
<li data-target="#Carousel2" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" id="newscarousel" role="listbox">
<div class="item active">
<img src="news.png" alt="Chania">
</div>
<div class="item">
<img src="news.png" alt="Chania">
</div>
<div class="item">
<img src="news.png" alt="Flower">
</div>
<div class="item">
<img src="news.png" alt="Flower">
</div>
</div><!-- Carousel inner -->
</div><!-- CAROUSEL 2 -->
</div><!-- Column 6 -->
这里是使用ID CarouselMessage更改的p标签的javascript,具体取决于哪个幻灯片处于活动状态。
$(document).ready(function () {
var arrMessages = ["this is a test", //set your messages here in an array
"It worked for Image 2 class!",
"It worked for Image 3 class!"]
var $msg = $("#CarouselMessage");
$('#Carousel2').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]); //fetch the value from array based on the index of the item and display.
});
});