如何在单击箭头时更改 bootstrap 4 carousal 速度？

Question

嗨，我正在 bootstrap 4 中开发一个应用程序。当我单击箭头时，默认的 bootstrap carousal 速度太快，在单击箭头时图像从左向右滑动太快。

我想在单击箭头时更改滑动速度。

这是我的滑块 HTML：

<div id="carousel-area">
    <div id="carousel-slider" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-slider" data-slide-to="1"></li>
        <li data-target="#carousel-slider" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img src="img/slider/bg-1.jpg" alt="">
          <div class="carousel-caption">
            <h1>Ultimate Solution for Your Website</h1>
          </div>
        </div>
        <div class="carousel-item">
          <img src="img/slider/bg-2.jpg" alt="">
          <div class="carousel-caption">
            <h1>Ultimate Solution for Your Website</h1>
          </div>
        </div>
        <div class="carousel-item">
          <img src="img/slider/bg-3.jpg" alt="">
          <div class="carousel-caption">
            <h1>Ultimate Solution for Your Website</h1>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carousel-slider" role="button" data-slide="prev">
        <i class="lnr  lnr-arrow-left"></i>
      </a>
      <a class="carousel-control-next" href="#carousel-slider" role="button" data-slide="next">
        <i class="lnr  lnr-arrow-right"></i>
      </a>
    </div>
  </div>

Answer 1

使用CSS来改变的速度transition-duration上.carousel-item。例如，这里是 2 秒...

.carousel-item {
  transition-duration: 2s;
}

https://www.codeply.com/go/M24LEPlrMU