This lightweight jQuery plugin helps you create an animated image slider with text. The slider comes with a responsive and interactive UI design that is best suited for the hero section of the webpage. Each slide contains animated behavior such as a smooth zoom-in animation for images and fading and sliding for captions. Additionally, there is a call-to-action button inside each slide that can be used to show more details or link to the product/service page.
This image slider project has multiple dependencies including Bootstrap, Font Awesome, Animate CSS, and jQuery. If you’re looking for a simple and dependency-free slider, you can explore the following projects:
How to Create Animated Image Slider with Text using jQuery
First of all, load the Bootstrap framework, Font Awesome, Animate CSS, and jQuery by adding the following CDN link into the head tag of your HTML document.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all"> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
After loading the necessary assets, now create the HTML structure for the slider as follows:
<div class="container-fluid"> <div class="row"> <div id="sg-carousel" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1" class=""></li> <li data-target="#carousel" data-slide-to="2" class=""></li> <li data-target="#carousel" data-slide-to="3" class=""></li> </ol> <!-- Carousel items --> <div class="carousel-inner carousel-zoom carousel-fade"> <div class="item active"><img class="img-responsive" src="https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818" alt=""> <div class="carousel-caption"> <h1 data-animation="animated zoomInLeft" class="cap-txt ">We are amazing</h1> <p data-animation="animated bounceInDown">Find more about me fiverr.com/sangrai</p> <button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button> </div> </div> <div class="item"><img class="img-responsive" src="https://images.unsplash.com/photo-1532580345237-bbaee187ef51?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=42145e0c3774c0886ebbadb220191d96&auto=format&fit=crop&w=1353&q=80" alt=""> <div class="carousel-caption"> <h1 data-animation="animated zoomInLeft" class="cap-txt">We are smart developers</h1> <p data-animation="animated bounceInDown">Find more about me fiverr.com/sangrai</p> <button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button> </div> </div> <div class="item"><img class="img-responsive" src="https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327" alt=""> <div class="carousel-caption animated slideInLeft"> <h1 data-animation="animated zoomInLeft" class="cap-txt">We are innovative</h1> <p data-animation="animated bounceInDown">Get start your next awesome project</p> <button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#sg-carousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#sg-carousel" data-slide="next">›</a> </div> </div> </div>
Style the slider using the following CSS styles. You can modify the CSS rules in order to customize the slider according to your needs.
#sg-carousel {
position: relative;
height: 100vh;
}
#sg-carousel .carousel-inner .item {
height: 100vh;
}
.carousel-caption{top:50%;}
.carousel-caption h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
#sg-carousel .carousel-control.left {
top: 48%;
}
#sg-carousel .carousel-control.right {
top: 48%;
}
.uppr-txt {
text-transform: uppercase;
color: #fff;
font-size: 35px;
}
#sg-carousel .carousel-control.left,
#sg-carousel .carousel-control.right {
background-image: none;
background-repeat: no-repeat;
opacity: 0;
text-shadow: none;
transition: all 0.8s ease 0s;
}
.carousel-control {
bottom: 0;
color: #fff;
font-size: 20px;
left: 0;
opacity: 0;
position: absolute;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
top: 0;
width: auto;
transition: all 0.8s ease 0s;
}
.carousel-inner {
box-shadow: 2px 6px 21px;
}
.fa-angle-right,
.fa-angle-left {
font-size: 80px;
}
#sg-carousel:hover .carousel-control.left {
left: 38px;
transition: all .2s ease 0;
}
#sg-carousel:hover .carousel-control.right {
right: 38px;
transition: all .2s ease 0;
}
#sg-carousel:hover .carousel-control.left,
#sg-carousel:hover .carousel-control.right {
opacity: 1;
}
.carousel-inner > .item > a > img,
.carousel-inner > .item > img,
.img-responsive,
.thumbnail a > img,
.thumbnail > img {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
.item.active img {
transition: transform 5000ms linear 0s;
transform: scale(1.05, 1.05);
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
font-size: 80px;
}
.carousel-caption {
left: 60%;
padding-bottom: 5%;
right: 0;
text-align: left;
}
.carousel-caption h1 {
font-family: raavi;
font-size: 60px;
font-weight: 600;
line-height: 18px;
}
.carousel-caption > p {
font-size: 30px;
color: #fff;
}
.carousel-caption > a {
text-transform: uppercase;
color: #fff;
background: #041132;
padding: 6px 12px;
}
.button--tamaya {
border: 2px solid #40a304 !important;
border-radius: 5px;
color: #7986cb;
min-width: 180px;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 1px;
}
.button--border-thick {
border: 3px solid;
}
.button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: inherit;
display: block;
float: left;
max-width: 250px;
min-width: 199px;
padding: 1em 7em;
position: relative;
vertical-align: middle;
z-index: 1;
}
.button--tamaya::before {
padding-top: 1em;
top: 0;
}
.button--tamaya::before,
.button--tamaya::after {
background: #40a304;
color: #fff;
content: attr(data-text);
height: 50%;
left: 0;
overflow: hidden;
position: absolute;
transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
width: 100%;
}
.button--tamaya::after {
bottom: 0;
line-height: 0;
}
.button--tamaya:hover::before {
transform: translate3d(0px, -100%, 0px);
}
.button--tamaya:hover::after {
transform: translate3d(0px, 100%, 0px);
color: #40a304;
}
.button--tamaya:hover {
color: #40a304;
font-weight: 600;
}
.carousel-indicators li {
background-color: #b3b5b9;
border-radius: 10px;
cursor: pointer;
display: inline-block;
height: 12px;
margin: 1px;
text-indent: -999px;
width: 12px;
border: 0;
}
.carousel-indicators .active {
background-color: #041132;
height: 12px;
margin: 0;
width: 12px;
border: 0;
}
#sg-carousel h1 {
animation-delay: 1s;
margin-bottom:25px;
}
#sg-carousel p {
animation-delay: 2s;
}
#sg-carousel button {
animation-delay: 3s;
margin-top:25px;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item{
transition: opacity 1s ease;
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
Finally, add the following JavaScript function between the <script> and </script> tags before closing the body tag to initialize the image slider.
(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 = $('#sg-carousel'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//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);
That’s all! hopefully, you have successfully created an animated image slider with text. If you have any questions or suggestions, feel free to comment below.
