主要div中的Bootstrap轮播指示器不会自动切换

Question

我有最新的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解决方法来单击它们时修复指标.

Answer 1

DEMO

那么您可以使用slide.bs.carousel选项bootstrap carousel并active根据当前幻灯片制作相应的指标,如下所示:

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

});

UPDATE

上面给出的答案只是说明indicators active当它们放在外面时如何制作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.
});