Блог

Главная - Вопросы по программированию - Как добавить класс отключения на кнопку, когда непрерывный цикл отключен, а ползунок не может двигаться в этом направлении?

Как добавить класс отключения на кнопку, когда непрерывный цикл отключен, а ползунок не может двигаться в этом направлении?

#jquery #twitter-bootstrap #bootstrap-4 #carousel

#jquery ( jquery ) #twitter-bootstrap #начальная загрузка-4 #карусель

Вопрос:

Я хотел бы отключить непрерывный цикл для разных элементов и кнопок стилей, если они не могут быть использованы.

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

Codepen

 .carousel {
  max-width: 500px; 
  position: relative;
}

.carousel-inner {
  overflow: visible;
}

.carouselcontrol {
    position: absolute;
    top: 50px;
    right: -100px;
    z-index: 9999;
    width: 100px;
    height: 50px;
    background: #333;
}

a.disable {
  opacity: .2;
} 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-wrap="true" data-interval="3000">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://place-hold.it/310x200">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://place-hold.it/320x200">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://place-hold.it/330x200">
    </div>
  </div>
  
  <div class="carouselcontrol">
  <a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
  
</div>

Ответ №1:

Я закодировал простое решение с помощью Jquery, но пока остановил автоматическое скольжение. Если вы хотите добавить автоматический слайд, вам ничего не нужно, используйте тот же фрагмент кода ниже.

 $(document).ready(function(){
  $('#carouselExampleIndicators').on('slid.bs.carousel', '', function() {
  var $this = $(this);
    $('.carouselcontrol .carousel-control-next').show();
    $('.carouselcontrol .carousel-control-prev').show();

  if($('.carousel-inner .carousel-item:first').hasClass('active')) {
    $('.carouselcontrol .carousel-control-prev').hide();
    console.log("prev hide");
  } else if($('.carousel-inner .carousel-item:last').hasClass('active')) {
    $('.carouselcontrol .carousel-control-next').hide();
    console.log("next hide");
  }

});
}); 
 .carousel {
  max-width: 500px;
  position: relative;
}

.carousel-inner {
  overflow: visible;
}

.carouselcontrol {
  position: absolute;
  top: 50px;
  right: -100px;
  z-index: 9999;
  width: 100px;
  height: 50px;
  background: #333;
}

a.disable {
  opacity: .2;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-wrap="true" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://place-hold.it/310x200">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://place-hold.it/320x200">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://place-hold.it/330x200">
    </div>
  </div>
  
  <div class="carouselcontrol">
  <a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
  
</div>

Кроме того, вам нужен дескриптор первого слайда. Вам не нужна предыдущая стрелка на первом слайде, установленная как display:none в начале.

Метки: , ,