jquery - 部分文本应使用纯 html css(无 JavaScript 或 jQuery)在 Carousel 中更改

Question

我有一个轮播，其中部分文本应以固定间隔更改。需要将文本从WEB更改为移动物联网应用开发运输产品等我正在使用 aurelia 框架

https://www.codeply.com/p/7k0uDOyaf3

$('#carouselExampleSlidesOnly').carousel({
  interval: 500
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img class="d-block w-100" src="https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg" alt="First slide">
      <div class="carousel-caption big clearfix p-5" style="width:fit-content">
        <div class="d-flex">
          <h1 class="text-uppercase text-white">We Architect,</h1>
          <h3 class="pt-2 pl-2">Design and Develop</h3>
        </div>
        <h1 class="text-uppercase"><span class="text-warning pr-3">Web</span>Application</h1>
      </div>
      <div class="carousel-caption d-none d-md-block"><img class="d-block w-75 image-left" src="https://cdn2.hubspot.net/hub/145335/file-407477601-gif/blog-files/the-importance-of-mobile-responsive-web-design.gif" alt="system Image"></div>
    </div>
  </div>
</div>

Answer 1

将 jQuery 脚本移至所有脚本的顶部，检查代码片段

var $ = jQuery;
$('#carouselExampleSlidesOnly').carousel({
  interval: 2000
})

.carousel-inner {
  background-image: url("https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px
}

.carousel-caption {
  top: 1em;
}

.carousel {
  position: relative
}

.d_flex {
  position: absolute;
  z-index: 99;
  justify-content: center;
  top: 10%;
  text-align: center;
  align-items: center;
  width: 100%;
}

.carousel-text {
  position: absolute;
  z-index: 99;
  height:100%;
  top:100%
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="d_flex d-flex">
    <h2 class="text-uppercase text-white">We Architect,</h2>
    <h3 class="text-white">Design and Develop</h3>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="carousel-caption" >
        <div class="carousel-text">
          <h1 class="text-uppercase">
            <span class="text-warning pr-3">Web</span>Application
          </h1>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption">
        <div class="carousel-text">
          <h1 class="text-uppercase">
            <span class="text-warning pr-3">Mobile</span>Application
          </h1>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption" >
        <div class="carousel-text">
          <h1 class="text-uppercase">
            <span class="text-warning pr-3">Desktop</span>Application
          </h1>
        </div>
      </div>
    </div>
  </div>


</div>