当禁用连续循环并且滑块无法朝该方向移动时，如何在按钮上添加禁用类？

Posted 2023-05-08

【中文标题】当禁用连续循环并且滑块无法朝该方向移动时，如何在按钮上添加禁用类？

【英文标题】：How to add disable class on a button when continuous loop is disabled and slider can't move in that direction?

【发布时间】：2021-03-12 12:13:37

【问题描述】：

如果不能使用不同的项目和样式按钮，我想禁用连续循环。

因此，第一张幻灯片不应向左移动，最后一张幻灯片不应向右移动。如果幻灯片无法朝那个方向移动，如何添加禁用该功能并在按钮上添加“禁用”类？ 我觉得这是一件基本的事情，我很惊讶地看到 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 编写了一个简单的解决方案，但我暂时停止了自动滑动。如果你想添加自动幻灯片，你不需要任何东西，使用下面相同的代码 sn-p。

$(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。