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的{{1}}选项，并根据当前幻灯片制作相应的指标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时无效，因为我还没有处理轮播指示符的点击事件。以下更新修复了相同的内容。

<强> UPDATED DEMO

click

Answer 2

您还可以将以下代码用于 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");
        });

Answer 3

对于Bootstrap 5

#myCarousel 是 carousel 的 ID，而 #indicators 是指标的父 div 的 ID。

let myCarousel = document.querySelector('#myCarousel');
myCarousel.addEventListener('slide.bs.carousel', (event) => {
    let elementChildrens = document.querySelector("#indicators").children;
    elementChildrens.item(event.from).classList.remove("active");
    elementChildrens.item(event.to).classList.add("active");
});

指标的 HTML：

<div id="indicators" class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>

用于轮播的 HTML：

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Answer 4

Guruprasads代码在移动到上一张幻灯片时未激活正确的指示符。这是我更通用的解决方案。

将ol-element上的data-target属性设置为轮播的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();
}

item data roles

Answer 5

这是一个使用 slid.bs.carousel

的简单解决方案

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('.carousel-indicators li').removeClass('active')
  var index = $(e.target).find('.active').index();
  $('.carousel-indicators li').eq(index).addClass('active');
})

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

5 个答案: