我有最新的 Bootstrap,并且在我的页面某处有一个旋转木马,指示器在主旋转木马 div 之外。
我的轮播:
<div class="background-carousel">
<div class="carousel slide carousel-fade" id="carousel-home" data-ride="carousel1">
<div class="carousel-inner" role="listbox" id="carousel-inner-home">
<div data-slide-no="0" class="item carousel-item active" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/home-bg-1.png)">
</div>
<div data-slide-no="1" class="item carousel-item" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/grass.jpg)">
</div>
<div data-slide-no="2" class="item carousel-item" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/grass2.jpg)">
</div>
<div data-slide-no="3" class="item carousel-item" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/img/grass3.jpg)">
</div>
</div>
</div> <!-- carousel -->
</div> <!-- /.background-carousel -->
然后我在页面的其他地方有我的指标:
<div class="home-carousel-indicators">
<ol class="carousel-indicators">
<li data-target="#carousel-home" data-slide-to="0" class="carousel-switcher active"></li>
<li data-target="#carousel-home" data-slide-to="1" class="carousel-switcher"></li>
<li data-target="#carousel-home" data-slide-to="2" class="carousel-switcher"></li>
<li data-target="#carousel-home" data-slide-to="3" class="carousel-switcher"></li>
</ol>
</div> <!-- /.home-caraousel-indicators -->
当轮播切换图片时,指示器不会改变。我还必须使用变通方法让他们在单击时更改轮播。
总结:
- 我的轮播效果很好。
- 我的轮播指示器位于轮播 div 之外。
- 指示器不会在轮播时自动切换。
- 我不得不使用 jQuery 解决方法来修复点击指示器时的问题。
最佳答案
那么您可以使用 bootstrap carousel
的 slide.bs.carousel
选项,并根据当前幻灯片使相应的指示器事件
如下:
var $carousel = $('#myCarousel'); //get a reference
$carousel.carousel();
$carousel.bind('slide.bs.carousel', function (e) { //attach its event
var current=$(e.target).find('.item.active'); //get the current active slide
$('.carousel-indicators li').removeClass('active') //remove active class from all the li of carousel indicator
var indx=$(current).index(); //get its index
if((indx+2)>$('.carousel-indicators li').length)
indx=-1 //if index exceeds total length of indicators present set it to -1
$('.carousel-indicators li:nth-child('+(indx+2)+')').addClass('active');//set the respective indicator active
});
更新
上面给出的答案只是展示了当 indicators 放在
。它在 carousel
之外时如何使它们激活click
时不工作,因为我没有处理轮播指示器的点击事件。下面的更新修复了相同的问题。
var $carousel = $('#myCarousel');
$carousel.carousel();
var handled=false;//global variable
$carousel.bind('slide.bs.carousel', function (e) {
var current=$(e.target).find('.item.active');
var indx=$(current).index();
if((indx+2)>$('.carousel-indicators li').length)
indx=-1
if(!handled)
{
$('.carousel-indicators li').removeClass('active')
$('.carousel-indicators li:nth-child('+(indx+2)+')').addClass('active');
}
else
{
handled=!handled;//if handled=true make it back to false to work normally.
}
});
$(".carousel-indicators li").on('click',function(){
//Click event for indicators
$(this).addClass('active').siblings().removeClass('active');
//remove siblings active class and add it to current clicked item
handled=true; //set global variable to true to identify whether indicator changing was handled or not.
});
关于jquery - 主 div 之外的 Bootstrap 轮播指示器不会自动切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31561717/