In this tutorial, I will show how to create a Bootstrap 4 slider with text animation using javascript. In this code, there are 4 pictures, and these pictures automatically change after a certain time interval with Text animation. I used JavaScript to change the picture after a certain time interval.
The Bootstrap 4 slider with text animation has three most important sections
1. Carousel indicators
The Carousel indicators provide the current position of the slide to the users and also provide alternate navigation for the slide to the users to move from one slide to another slide.
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>Bootstrap Automatic Slider free Download
2. The Carousel item
The carousel item class is located in a wrapper container with a class of. .Carousel-inner. The Carousel item represents each slide. In the carousel item, you can add your images and also add the caption with different-different animation.
<!-- first slide -->
<div class="carousel-item active">
<img src="images/html-css-tutorials-banner-1.jpg" alt="Bootstrap 4 slider with text animation" />
<div class="carousel-caption d-md-block">
<h3 data-animation="animated bounceInLeft">
Free Download
</h3>
<h3 data-animation="animated bounceInRight">
Bootstrap 4 slider with text animation
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">
Button
</button>
</div>
</div>
3. Carousel Control
The carousel-control has a navigation arrow that allows users to next and previous the previous image slides.
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
The Main Features of Bootstrap 4 slider with text animation
1. Highly Customizable
Every slideshow parameter will be simply customized to suit your web page design and your needs. Bootstrap 4 slider with text animation key features of like the navigation arrow (with Prev/next bullets), auto-play, loop, random order, text descriptions with animations.
2. Responsive Design
Bootstrap 4 slider with text animation is brilliantly responsive with any template, effect, options you select. It doesn’t matter what device people access your website from, the slider will look constantly excellent.
3. Full-width slider
In contrast to full width, the boxed layout option allows users to set your slider to span the whole width of the browser to make your images stand out without scroll.
4. Touch/swipe navigation arrow
With the rising trend of mobiles, it is necessary that your website be accessible on all gadgets like mobile, Tablet and desktop or laptop. HTML slideshow contains the support for touch screen gestures to ensure that your visitors receive a clean, native-like experience.
5. Browsers Support
Bootstrap Slider runs perfectly in all browsers, like IE6+, Firefox, Safari, Google Chrome Opera, iOS and Android. It has a well-structured and clear HTML and CSS code, readable by any search engine.
How To Create a Carousel
The following example shows how to create a bootstrap 4 slider with text animation:
The HTML Code
<div class="container-fluid">
<div class="row">
<div class="col">
<!-- carousel code -->
<div id="carouselExampleIndicators" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<!-- first slide -->
<div class="carousel-item active"> <img src="images/html-css-tutorials-banner-1.jpg" alt="Bootstrap 4 slider with text animation" />
<div class="carousel-caption d-md-block">
<h3 data-animation="animated bounceInLeft"> Free Download </h3>
<h3 data-animation="animated bounceInRight"> Bootstrap 4 slider with text animation </h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
</div>
</div>
<!-- second slide -->
<div class="carousel-item"> <img src="images/html-css-tutorials-banner-2.jpg" alt="Bootstrap 4 slider" />
<div class="carousel-caption d-md-block">
<h3 data-animation="animated bounceInUp"> Bootstrap 4 Responsive Slider with Text Animation </h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>
</div>
</div>
<!-- third slide -->
<div class="carousel-item"> <img src="images/html-css-tutorials-banner-3.jpg" alt="Text animation" />
<div class="carousel-caption d-md-block">
<h3 data-animation="animated flipInX"> Mobile Friendly Image Slider in HTML CSS</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>
</div>
</div>
<!-- forth slide -->
<div class="carousel-item"> <img src="images/html-css-tutorials-banner-4.jpg" alt="Bootstrap Carousel" />
<div class="carousel-caption d-md-block">
<h3 data-animation="animated flipInX"> Bootstrap Carousel with Caption </h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>
</div>
</div>
</div>
<!-- controls -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>
</div>The Javascript Code
<script >
(function ($) {
//Function to animate slider captions
function doAnimations(elems) {
//Cache the animationend event in a variable
var animEndEv = "webkitAnimationEnd animationend";
elems.each(function () {
var $this = $(this),
$animationType = $this.data("animation");
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $("#carouselExampleIndicators"),
$firstAnimatingElems = $myCarousel.
find(".carousel-item:first").
find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Other slides to be animated on carousel slide event
$myCarousel.on("slide.bs.carousel", function (e) {
var $animatingElems = $(e.relatedTarget).find(
"[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
//# sourceURL=pen.js
</script>Javascript Library
Include the below javascript library in the HTML footer section
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>You can download Bootstrap jquery and CSS from official website
CSS File
Add the below following bootstrap CSS in the HTML header section
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<link rel="stylesheet" href="style.css" />.container-fluid {
overflow: hidden;
padding: 0px;
}
.carousel-indicators {
bottom: 0;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel-item {
min-height: 350px;
height: 100%;
width: 100%;
}
.carousel-caption h3 {
background-color: rgb(4 4 4 / 35%);
}
.carousel-caption button {
background-color: rgb(0 0 0 / 75%);
}
.carousel-caption button:hover {
background-color: #000;
border-color: #000;
}
.carousel-caption h3 {
padding: .5em;
}
.carousel .icon-container {
display: inline-block;
font-size: 25px;
line-height: 25px;
padding: 1em;
text-align: center;
border-radius: 50%;
}
.carousel-caption button {
border-color: #000;
margin-top: 1em;
}
/* Animation delays */
.carousel-caption h3:first-child {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.carousel-caption button {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
.p {
padding-top: 125px;
text-align: center;
}
.p a {
text-decoration: underline;
}
.logoIcon {
width: 30%;
height: 30%;
border-radius: 100px;
}
.back-btn {
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
.carousel-item img {
object-fit: cover;
width: 100%;
}Source code for Bootstrap 4 slider with text animation below
Share this:
Related Post
