Home » Jquery » Part of the text should change in Carousel using pure html css no JavaScript or jQuery

Part of the text should change in Carousel using pure html css no JavaScript or jQuery

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have a Carousel where part of the text should change at a fixed interval. need to change the text from WEB to mobile IoT application development transport products etc
I’m using aurelia framework

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>
How to&Answer:

Move your jQuery script to top of all scrips, check the snippet

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>