我试图在点击旋转木马后用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>