根据白色幻灯片在bootstrap轮播中激活文本更改

时间:2016-08-02 22:39:57

标签: javascript jquery twitter-bootstrap

所以我需要更改不同列中某些内容的文本,这取决于哪个幻灯片处于活动状态。我似乎无法弄清楚我在哪里出错了。 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.

});
});

0 个答案:

没有答案