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

如何在点击箭头时更改bootstrap 4 carousal speed？

1 个答案: