如何在单击箭头时更改引导 4 轮播速度？答案

【问题标题】：How to Change bootstrap 4 carousal speed on clicking arrow?如何在单击箭头时更改引导 4 轮播速度？
【发布时间】：2018-11-09 07:31:09
【问题描述】：

您好，我正在使用 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>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 carousel

【解决方案1】：

使用 CSS 更改 transition-duration 上 .carousel-item 的速度。比如这里是2秒...

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

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

【讨论】：