Несколько загрузочных каруселей с кнопками воспроизведения / паузы - PullRequest
Новая
       4

Несколько загрузочных каруселей с кнопками воспроизведения / паузы

0 голосов
/ 27 сентября 2018

Как я могу изменить приведенный ниже код так, чтобы кнопки воспроизведения / паузы применялись только к одной карусели?Я хотел бы, чтобы они оба были независимыми.Есть ли какой-нибудь способ связать функцию щелчка с родительским контейнером?

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 Ответ

0 голосов
/ 27 сентября 2018

Вы можете использовать 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>
...