bootstrap 4 轮播如何主动转换？

Question

我有一个 bootstrap 4 旋转木马，我每次需要移动 4 张幻灯片。 我正在使用这段代码：

$(this).carousel(4)

问题是 carousel 只是跳到那个索引并且没有显示任何转换。如果我使用

$(this).carousel("next")

或

$(this).carousel("prev")

它会起作用并且转换被激活。

我试过使用这样的东西：

$(this).carousel("next")
$(this).carousel("next")

但它不起作用。

Answer 1

首先，您需要在项目中包含所需的 JavaScript 和 CSS，创建必要的 HTML 并使用 build in carousel 类。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

“头”中的链接和“正文”末尾的脚本。 然后使用轮播类和唯一 ID 创建轮播 HTML。该结构应包括指示器、项目和导航控件：

<div id="myCarousel" class="carousel slide" data-ride="carousel">


<!-- Indic-->
  <ul class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ul>
  
  <!-- slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img1.jpg" alt="Image 1" width="100%" height="100%">
      <div class="carousel-caption">
        <h3>Image 1</h3>
        <p>Description 1</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img2.jpg" alt="Image 2" width="100%" height="100%">
      <div class="carousel-caption">
        <h3>Image 2</h3>
        <p>Description 2</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="img3.jpg" alt="Image 3" width="100%" height="100%">
      <div class="carousel-caption">
        <h3>Image 3</h3>
        <p>Description 3</p>
      </div>
    </div>
  </div>
  
  <!-- Contr-->
  <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

将“img1.jpg”、“img2.jpg”和“img3.jpg”与您要使用的图像路径或链接（url）交换。 最后一件事，激活旋转木马，当

data-ride="carousel"

属性添加到主旋转木马

div

元素时，bootstrap 会自动激活它。 您也可以在这里查看更多信息：carousel bootstrap docs.

希望这有助于回答您的问题。

差点忘了：

$(document).ready(function() {
  // Initialize the carousel
  $("#myCarousel").carousel({ interval: false });

  // Custom next function
  $(".carousel-control-next").click(function() {
    moveCarousel(4);
  });

  // Custom prev function
  $(".carousel-control-prev").click(function() {
    moveCarousel(-4);
  });

  // Move the carousel by the specified number of slides
  function moveCarousel(steps) {
    var currentIndex = $("#myCarousel .carousel-inner .carousel-item.active").index();
    var totalItems = $("#myCarousel .carousel-inner .carousel-item").length;

    var targetIndex = currentIndex + steps;
    if (targetIndex < 0) {
      targetIndex = 0;
    } else if (targetIndex >= totalItems) {
      targetIndex = totalItems - 1;
    }

    $("#myCarousel").carousel(targetIndex);
  }
});

启用平滑过渡效果修改代码：

// Move the carousel by the specified number of slides
function moveCarousel(steps) {
  var currentIndex = $("#myCarousel .carousel-inner .carousel-item.active").index();
  var totalItems = $("#myCarousel .carousel-inner .carousel-item").length;
  var remainingSteps = steps;

  function moveOneStep() {
    var newIndex = currentIndex + (remainingSteps > 0 ? 1 : -1);
    if (newIndex < 0 || newIndex >= totalItems) {
      return;
    }

    $("#myCarousel").one("slid.bs.carousel", function() {
      remainingSteps -= (remainingSteps > 0 ? 1 : -1);
      if (remainingSteps !== 0) {
        moveOneStep();
      }
    });

    $("#myCarousel").carousel(newIndex);
    currentIndex = newIndex;
  }

  moveOneStep();
}