文本的一部分应该在Carousel中使用纯HTML CSS而不是JavaScript或jQuery进行更改

Question

我有一个轮播，其中部分文本应按固定的间隔进行更改。需要将文本从WEB更改为移动IoT应用程序开发传输产品等我正在使用aurelia框架

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

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

<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 class="carousel-item"><img class="d-block w-100" src="https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg" alt="Second slide">
      <div class="carousel-caption d-none d-md-block small">
        <h5 class="text-uppercase banner-small">We Architect, Design and Develop</h5>
      </div>
    </div>
    <div class="carousel-item"><img class="d-block w-100" src="https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg" alt="Third slide">
      <div class="carousel-caption d-none d-md-block small">
        <h5 class="text-uppercase banner-small">We Architect, Design and Develop</h5>
      </div>
    </div>
  </div>
</div>

Answer 1

将您的jQuery脚本移动到所有脚本中，请检查代码片段

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

<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://1030z2bnst92zo6j523feq9e-wpengine.netdna-ssl.com/wp-content/uploads/2019/07/responsive.png" alt="system Image"></div>
    </div>
    <div class="carousel-item"><img class="d-block w-100" src="https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg" alt="Second slide">
      <div class="carousel-caption d-none d-md-block small">
        <h5 class="text-uppercase banner-small">We Architect, Design and Develop</h5>
      </div>
    </div>
    <div class="carousel-item"><img class="d-block w-100" src="https://worldtransfer.online/wp-content/uploads/2016/09/worldmap-bg.jpg" alt="Third slide">
      <div class="carousel-caption d-none d-md-block small">
        <h5 class="text-uppercase banner-small">We Architect, Design and Develop</h5>
      </div>
    </div>
  </div>
</div>