根据当前幻灯片显示的jQuery Boostrap旋转木马内容
根据当前幻灯片显示的jQuery Boostrap旋转木马内容
提问于 2015-05-20 11:58:58
我正在使用引导jquery旋转木马幻灯片内容。我在旋转木马下面也有一些内容。此内容应隐藏/显示幻灯片所显示的内容。
由于引导程序在当前幻灯片上使用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");
}
});谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-20 12:45:00
要实现这一点，有很多种方法。根据您正在运行的引导程序的版本，可以使用slid、slide或slide.bs.carousel。
3之前的引导版本
您可以尝试这一点(取决于您正在运行的引导程序的哪个版本)，使用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
}
});在自助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 ids，而不是使用类来标识它们，而是使用它们的单个ids。
例如：
<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 -->页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30349019
复制相关文章
相似问题
腾讯云开发者
