时间戳

首页 > 解决方案 > 如何让这个轮播每隔“定义”秒改变一次图像？

javascript - 如何让这个轮播每隔“定义”秒改变一次图像？

问题描述

我希望输出每 3 秒更改一次图像。我不知道如何修改现有的输出。我找不到要编辑的适当属性。

该网站的链接是https://www.vimaldevelopers.com。请帮我检查和解决这个问题

轮播图片的链接https://i.imgur.com/98SsWA0.png（需要 10 声望才能发布图片，所以我必须分享链接）

carousel-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.1);
}

.carousel-inner img {
  width: 100%;
  height: 100%;
}
<section class="container-fluid px-0">
  <div class="row align-items-center">
    <div class="col-lg-12 text-center sliderpaddingtop py-5">
      <div class="row justify-content-center">
        <!-- <div id="headingGroup" class="text-center col-10 col-lg-8  d-lg-block mt-5 pt-md-5"> -->
          <div id="demo" class="carousel slide" data-ride="carousel">
            <ul class="carousel-indicators">
              <li data-target="#demo" data-slide-to="0" class="active"></li>
              <li data-target="#demo" data-slide-to="1"></li>
              <li data-target="#demo" data-slide-to="2"></li>
            </ul>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="img-fluid" src="imgs/vc.jpg" alt="Los Angeles">
              </div>
              <div class="carousel-item">
                <img class="img-fluid" src="imgs/vh.jpg" alt="Chicago">
              </div>
              <div class="carousel-item">
                <img class="img-fluid" src="imgs/vi.jpg" alt="New York">
              </div>
            </div>
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
              <span class="carousel-control-next-icon"></span>
            </a>
          </div>
        <!-- </div> -->
      </div>
    </div>
  </div>
</section>

标签： javascriptjqueryhtmlcsscarousel

解决方案

你可以用这个我想

$('.carousel').carousel({
  interval: 1000 * 10
});

或者

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

推荐阅读