Индикаторы карусели Bootstrap из основного div не переключаются автоматически

у меня есть последняя Бутстрэп, и есть карусель где-то на моей странице, с индикаторами за пределами главной карусели 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, чтобы исправить индикаторы при нажатии на них.
7
carousel css html jquery twitter-bootstrap

3 ответов

демо

также вы можете использовать на 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

});

обновление

ответ, приведенный выше, просто показывает, как сделать 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.
});
12

код Guruprasads не активирует правильный индикатор при переходе на предыдущий слайд. Вот мое более общее решение.

установите атрибут data-target на вашем элементе ol в id вашей карусели:

<ol class="carousel-indicators" data-target="#myCarousel">

и включите следующий код js:

function initCarouselIndicators() {
    $(".carousel-indicators[data-target]").each(function (i, indicators) {
        var targetId = indicators.dataset.target;
        if (targetId != "") {
            var $carousel = $(targetId);
            $carousel.bind('slide.bs.carousel', function (e) {
                var $targetSlide = $(e.relatedTarget);
                var index = $targetSlide.index();
                $('.carousel-indicators[data-target="' + targetId + '"] li').removeClass('active')
                $('.carousel-indicators[data-target="' + targetId + '"] li:nth-child(' + (index + 1) + ')').addClass('active');
            });
        }
    });
}

$(document).ready(function () {
    initCarouselIndicators();
}

демо

0

вы можете использовать следующий код для bootstrap4

$('#your-slide-div').on('slide.bs.carousel', function () {
            $holder = $( ".carousel-indicators li.active" );
            $holder.next( "li" ).addClass("active");
            if($holder.is(':last-child'))
            {
                $holder.removeClass("active");
                $(".carousel-indicators li:first").addClass("active");
            }
            $holder.removeClass("active");
        });
0