Bootstrap v5.0 Carousel 在选择（单击）轮播项目后停止自动播放

Question

单击轮播项目后，我正在尝试使用 jQuery 停止轮播自动播放。但我的任何尝试都不起作用。谁能帮帮我？

谢谢！

这是我的尝试1：

 $(".carousel-item .card-selection").on("click", function (){
        $("#carouselExampleControls").attr("data-bs-interval", "false");
})

我也尝试过（在 HTML 中删除 data-bs-ride="carousel" 属性后）：

 $(".carousel-item .card-selection").on("click", function (){
        $("#carouselExampleControls").carousel({
            pause: true,
            interval: false
        });
})

这是轮播：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row selection-wrapper">
        <div class="mb-2 col-6">
          <div class="card card-selection h-100">
            <label for="selected-item-4" class="mx-2 selected-label">
                                            <input type="radio" name="G1" id="selected-item-4">
                                            <span class="icon"></span>
                                            <div class="card-body">
                                                <h5 class="card-title">1</h5>
                                                <p class="card-text">This is a wider card with supporting text below as a natural
                                                    lead-in to additional content. This content is a little bit longer.</p>
                                            </div>

                                            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row selection-wrapper">
        <div class="mb-2 col-6">
          <div class="card card-selection h-100">
            <label for="selected-item-5" class=" border-light mx-1 selected-label">
                                                <input type="radio" name="G2" id="selected-item-5">
                                                <span class="icon"></span>
                                                <div class="card-body">
                                                    <h5 class="card-title">2</h5>
                                                    <p class="card-text">This card has supporting text below as a natural lead-in to
                                                        additional content.</p>
                                                </div>
                                            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

如果我理解您关于“选择卡片后”的评论 - 您正在寻找能够单击卡片上的单选按钮的用户，这样做会阻止轮播（至少在用户再次单击单选按钮以取消选择卡片）。

你可以只用 JavaScript 来做到这一点。 Bootstrap 5 不需要 jQuery，因为 Bootstrap 5 只支持现代浏览器（没有 IE），所以你不需要 jQuery。

您可以使用 Bootstrap 的轮播实例来停止和重新启动轮播。

var myCarousel = document.getElementById("carouselExampleControls");
var radios = document.querySelectorAll("input[type=radio]");
var cycling = true;

radios.forEach(function(radio) {
    radio.checked = false;
    radio.addEventListener("click", function(e) {
        var carousel = bootstrap.Carousel.getInstance(myCarousel);

        if (cycling === true) {
            carousel.pause();
            cycling = false;
        } else {
            carousel.cycle();
            cycling = true;
            e.target.checked = false;
        }
    });
});

.carousel-item {
    height: 12.5rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
    <div class="row selection-wrapper">
        <div class="col-6 mb-2 ">
            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="card card-selection h-100">
                            <label for="selected-item-4" class="mx-2 selected-label">
                                <input type="radio" name="G1" id="selected-item-4">
                                <span class="icon"></span>
                            </label>
                            <div class="card-body">
                                <h5 class="card-title">1</h5>
                                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                            </div>
                        </div>
                    </div>

                    <div class="carousel-item">
                        <div class="card card-selection h-100">
                            <label for="selected-item-5" class=" border-light mx-1 selected-label">
                                <input type="radio" name="G2" id="selected-item-5">
                                <span class="icon"></span>
                            </label>
                            <div class="card-body">
                                <h5 class="card-title">2</h5>
                                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我确实将您的 div 移出标签（div 不应该是标签的子级），我不确定为什么您在 carousel-item 中有一行和 col-6，所以我更改了那些。我还为卡片添加了固定高度。

Answer 2

我已经让它像这样工作了，可能有更好的“引导”方式来做到这一点。

var myCarousel = document.querySelector('#carouselExampleControls')
var carousel = new bootstrap.Carousel(myCarousel, {
  ride: 'carousel',
  interval: 100,
});

let paused = false;
$('.card-body').on('click', () => {
  if (paused) {
    carousel.cycle()
    paused = false;
  } else {
    carousel.pause();
    paused = true;
  }
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>

<div id="carouselExampleControls" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row selection-wrapper">
        <div class="mb-2 col-6">
          <div class="card card-selection h-100">
            <label for="selected-item-4" class="mx-2 selected-label">
                                            <input type="radio" name="G1" id="selected-item-4">
                                            <span class="icon"></span>
                                            <div class="card-body">
                                                <h5 class="card-title">1</h5>
                                                <p class="card-text">This is a wider card with supporting text below as a natural
                                                    lead-in to additional content. This content is a little bit longer.</p>
                                            </div>

                                            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row selection-wrapper">
        <div class="mb-2 col-6">
          <div class="card card-selection h-100">
            <label for="selected-item-5" class=" border-light mx-1 selected-label">
                                                <input type="radio" name="G2" id="selected-item-5">
                                                <span class="icon"></span>
                                                <div class="card-body">
                                                    <h5 class="card-title">2</h5>
                                                    <p class="card-text">This card has supporting text below as a natural lead-in to
                                                        additional content.</p>
                                                </div>
                                            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>