jQuery Boostrap Carousel根据当前幻灯片显示内容 [英] jQuery Boostrap Carousel Show content according to current slide
问题描述
我正在使用引导jquery轮播来滑动内容.在轮播下,我也有一些内容.该内容应根据所显示的幻灯片进行隐藏/显示.
I am using bootstrap jquery carousel to slide content. I also have some content below the carousel. This content should hide/show according to which slide is showing.
由于引导程序在当前幻灯片上处于活动状态,因此我在下面编写了代码. 现在,当我使用箭头时,此方法有效.但是,如果我使用键盘箭头作为下一个和上一个箭头,或者当幻灯片自动播放时,内容将不会相应地显示/隐藏.
Since bootstrap uses active on the current slide I wrote the code below. Now this works when I use the arrows. But if I use keyboard arrows for next and previous, or when the slide is autoplay, the content does not show/hide accordingly.
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");
}
});
谢谢
推荐答案
有很多方法可以实现此目的.根据运行的引导程序版本,可以使用slid
,slide
或slide.bs.carousel
.
There are tons of ways to implement this. Depending on what version of bootstrap you are running, you can use the slid
, slide
or slide.bs.carousel
.
您可以尝试此操作(取决于您正在运行的引导程序的版本),使用slid函数,它可以检测到slide事件何时完成:
You can try this (depending on what version of bootstrap you are running), with the slid function, it detects when the slide event is completed:
$("#myCarousel").carousel()
$("#myCarousel").bind("slid", function(){
$currentActive = $("#myCarousel .active").attr('id');
if($currentActive == "item1"){
//then show something
}else if(...){....}
})
使用幻灯片和slid事件,您可以找到当前幻灯片和下一张幻灯片/目标幻灯片,该解决方案尚未经过测试,但应该可以正常工作.
using the slide and the slid event you can find current slide and the next slide/target slide, this solution hasn't been tested yet but it should work fine.
$('.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 ID,而是使用他们的单个ID而不是使用类来标识它们.
例如:
Update
Why not give your success-content children div ids and instead of using the class to identify them, you use their individual ids.
for example:
<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根据当前幻灯片显示内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!