Question

我正在使用bootstrap jquery carousel来播放内容。我在转盘下面也有一些内容。该内容应根据显示的幻灯片隐藏/显示。

由于bootstrap在当前幻灯片上使用了active，我编写了下面的代码。现在，当我使用箭头时，这是有效的。但是如果我在下一个和上一个使用键盘箭头，或者当幻灯片是自动播放时，内容不会相应地显示/隐藏。

jQuery的：

    $('#success-stories .carousel-control.left, #success-stories .carousel-control.right').click(function() {
        if ( $('#success-stories .item1').hasClass("active") ) {
            $('.success1').removeClass("active"); 
            $('.success2').addClass("active"); 
        }
        if ( $('#success-stories .item2').hasClass("active") ) {
            $('.success2').removeClass("active"); 
            $('.success1').addClass("active"); 
        }

    });

由于

Answer 1

有很多方法可以实现这一点。根据您运行的引导程序的版本，您可以使用slid，slide或slide.bs.carousel。

3之前的Bootstrap版本

你可以尝试这个（取决于你正在运行的bootstrap的版本），使用slid函数，它会检测幻灯片事件的完成时间：

$("#myCarousel").carousel()
 $("#myCarousel").bind("slid", function(){
    $currentActive = $("#myCarousel .active").attr('id');
       if($currentActive == "item1"){
           //then show something
       }else if(...){....}
  })

使用幻灯片和滑动事件，您可以找到当前幻灯片和下一张幻灯片/目标幻灯片，此解决方案尚未经过测试，但它应该可以正常工作。

$('.carousel').on('slide',function(e){
    var slideFrom = $(this).find('.active').index();
    var slideTo = $(e.relatedTarget).index();
    if(slideTo == 1){
       //do something for item one, realise here i am working with indexes
    }
});

在bootstrap 3中：

$('#myCarousel').on('slide.bs.carousel', function (e) {
  //according to the documentation this event is fired when the slide method is invoked

    var slideFrom = $(this).find('.active').index();
    var slideTo = $(e.relatedTarget).index();
    if(slideTo == 1){
       //do something for item one, realise here i am working with indexes
    }
})

更新

为什么不给你的成功内容儿童div，而不是使用类来识别它们，你使用他们的个人ID。
例如：

 <div id="success-content">
                <div class="success1 active" id="successOne">
                    <h4 class="rounded-heading">Eleanor's Story</h4>
                    <p>
                        <span class="quote-start"></span>
                             Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. comes from a line in section 1.10.32.
                        <span class="quote-finish"></span>
                    </p>
                    <p>
                        Isobel Leeds)
                    </p>
                    <p>
                        All case studies are genuine photographs and un-retouched case studies of our own patients treated in our own clinics. (Reproduced with their consent)
                    </p>

                </div><!-- end success1 -->
                <div class="success2" id="successTwo">
                    <h4 class="rounded-heading">Melsor's Story</h4>
                    <p>
                        <span class="quote-start"></span>
                             Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. comes from a line in section 1.10.32.
                        <span class="quote-finish"></span>
                    </p>
                    <p>
                        Isobel Leeds)
                    </p>
                    <p>
                        All case studies are genuine photographs and un-retouched case studies of our own patients treated in our own clinics. (Reproduced with their consent)
                    </p>
                </div>              
            </div><!-- end success-content -->

        </div><!-- end success-stories -->

jQuery Boostrap Carousel根据当前幻灯片显示内容

1 个答案:

3之前的Bootstrap版本

在bootstrap 3中：

更新