带有播放/暂停按钮的多个引导轮播

Posted 2023-05-08

【中文标题】带有播放/暂停按钮的多个引导轮播

【英文标题】：Multiple bootstrap carousels with play/pause buttons

【发布时间】：2019-03-02 17:50:07

【问题描述】：

如何修改以下代码以使播放/暂停按钮仅适用于单个轮播？我希望他们都独立。有没有办法将点击功能与父容器联系起来？

JS：

$(function () 
       $('.carousel').carousel(
           interval: 1000,
           pause: "false"
       );
       $('.carousel .carousel-controls .play').click(function () 
           $('.carousel').carousel('cycle');
       );
       $('.carousel .carousel-controls .pause').click(function () 
           $('.carousel').carousel('pause');
       );
    );

html：

<div id="content">
    <div class="carousel slide" id="carouselExampleControls">
        <div class="carousel-controls">
            <a data-slide="prev" href="#carouselExampleControls" role="button">Previous</a> <a class="play" href="#" role="button">Play</a> <a class="pause" href="#" role="button">Pause</a> <a data-slide="next" href="#carouselExampleControls" role="button">Next</a>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
            <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=cccccc"></div>
            <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
        </div>
    </div>

    <div class="carousel slide" id="carouselExampleControls">
        <div class="carousel-controls">
            <a data-slide="prev" href="#carouselExampleControls" role="button">Previous</a> <a class="play" href="#" role="button">Play</a> <a class="pause" href="#" role="button">Pause</a> <a data-slide="next" href="#carouselExampleControls" role="button">Next</a>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
            <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=cccccc"></div>
            <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
        </div>
    </div>
</div>

【参考方案1】：

您可以使用closest() 找到被点击按钮的父.carousel。

$(function() 
  $('.carousel').carousel(
    interval: 1000,
    pause: "false"
  );
  $('.carousel .carousel-controls .play').click(function() 
    $(this).closest('.carousel').carousel('cycle');
  );
  $('.carousel .carousel-controls .pause').click(function() 
    $(this).closest('.carousel').carousel('pause');
  );
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.min.js"></script>

<div id="content">
  <div class="carousel slide" id="carouselExampleControls">
    <div class="carousel-controls">
      <a data-slide="prev" href="#carouselExampleControls" role="button">Previous</a> <a class="play" href="#" role="button">Play</a> <a class="pause" href="#" role="button">Pause</a> <a data-slide="next" href="#carouselExampleControls" role="button">Next</a>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
      <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=cccccc"></div>
      <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
    </div>
  </div>

  <div class="carousel slide" id="carouselExampleControls">
    <div class="carousel-controls">
      <a data-slide="prev" href="#carouselExampleControls" role="button">Previous</a> <a class="play" href="#" role="button">Play</a> <a class="pause" href="#" role="button">Pause</a> <a data-slide="next" href="#carouselExampleControls" role="button">Next</a>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
      <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=cccccc"></div>
      <div class="carousel-item"><img src="https://placeholdit.co//i/900x450?bg=d1e1d1"></div>
    </div>
  </div>
</div>