主 div 之外的引导轮播指示器不会自动切换

Posted 2023-03-05

【中文标题】主 div 之外的引导轮播指示器不会自动切换

【英文标题】：Bootstrap carousel indicators out of the main div not switching automatically

【发布时间】：2015-10-12 05:52:45

【问题描述】：

我有最新的 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 解决方法来修复指示器。

【参考方案1】：

这是一个使用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');
)

【参考方案2】：

对于 Bootstrap 5

#myCarousel是轮播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" >
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" >
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" >
    </div>
  </div>
</div>

【讨论】：

谢谢！干净且有效的代码。

【参考方案3】：

这里有一个更简化的 Guruprasad Rao 答案示例，如果指标在主轮播 div 之外，它们可以使指标正常工作。它适用于具有data-target 属性的每个元素，而不仅仅是li

$('.carousel').bind('slide.bs.carousel', function (e) 
    var index = $(e.relatedTarget).index();

    $('[data-target="#' + $(this).prop('id') + '"]').each(function (i) 
        if (i === index) 
            $(this).addClass('active');
         else 
            $(this).removeClass('active');
        
    );
);

【参考方案4】：

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

【参考方案5】：

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();

Demo

【参考方案6】：

DEMO

你可以利用bootstrap carousel的slide.bs.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 时不起作用，因为我还没有处理轮播指示器的点击事件。下面的更新修复了相同的问题。

UPDATED DEMO

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.
);

【讨论】：

任何时候..快乐编码..:)

嗨，如果我点击第三个指标，第二个指标会被激活（添加了活动类）。你能检查一下吗？

@ilmk.. 更新答案.. 检查并告诉我.. 谢谢你的指点.. :)

@ilmk 随时.. 快乐编码.. :)