Bootstrap 4数据幻灯片无法正常工作 [英] Bootstrap 4 data-slide-to not working

问题描述

根据Bootstrap的文档，我应该能够定位到轮播中的特定幻灯片，并使用data-slide-to属性转到该幻灯片.我在这里固定了一个简单的示例: https://codepen.io/alemieux/pen/mqzVML

According to Bootstrap's documentation, I should be able to target a specific slide in a carousel and go to that slide with the data-slide-to attribute. I've fixed up a quick example here: https://codepen.io/alemieux/pen/mqzVML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-slide-to="0">
Go to First Slide
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-slide-to="1">
Go to Second Slide
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-slide-to="2">
Go to Third Slide
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-body">
         <!-- Carousel with controls -->
         <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
               <div class="carousel-item active">
                  <h1>This is the first slide</h1>
                  <p>The content of slide 1</p>
               </div>
               <div class="carousel-item">
                  <h1>This is the Second slide</h1>
                  <p>The content of slide 2</p>
               </div>
               <div class="carousel-item">
                  <h1>This is the Third slide</h1>
                  <p>The content of slide 3</p>
               </div>
               <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
               <span class="carousel-control-prev-icon" aria-hidden="true"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
               </a>
               <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
               <span class="carousel-control-next-icon" aria-hidden="true"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
               </a>
            </div>
         </div>
         <!-- End Carousel -->
      </div>
      <button type="bottom" class="btn btn-secondary" data-dismiss="modal">Close</button>
   </div>
</div>

但是它不起作用.轮播位于模式内部，我想知道是否是问题所在.

But it's not working. The carousel is inside a modal and I'm wondering if that's the issue.

推荐答案

我认为data-slide-to属性旨在用于主轮播标签内的<ol>项目.但是，只需使用一些JavaScript，即可使其正常工作:

I think that the data-slide-to attribute was designed to be used on <ol> items inside the main carousel tag. However, with a little javascript you can make it work:

$('button[data-slide-to]').on('click', function(){
    $('#carouselExampleControls').carousel($(this).data('slide-to'));
});

此外，我会考虑在轮播标签上设置data-interval="false"以便停止自动循环.

Also, I would consider to set data-interval="false" on the carousel tag in order to stop the automatic cycling.

更新: CodePen

这篇关于Bootstrap 4数据幻灯片无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！