Bootstrap Automatic Slider free Download

Bootstrap Automatic Slider free (Bootstrap Carousel) Download Source code, Demo available at bottom

Table of Contents

In this article, I am going to explain step by step Bootstrap Automatic slider (Bootstrap Carousel) using Bootstrap CSS, JS Library and Animation CSS.

Bootstrap Carousel Slider Features

Bootstrap Automatic Slider features are listed below.

Image Slider (Add Multiple Images)
Full Width Slider
Bootstrap Slider
Navigation (next/prev) option available
Add unlimited Images
Captions and Title
Add Hyperlinks for redirection
Automatic Slideshow
Bootstrap Carousel slideshow
Carousel Indicators

Following steps to create Bootstrap Carousel are:

Create index.html and paste it the below Boostrap library file in the header section.

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/carousel.css" rel="stylesheet">
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link href="css/style.css" rel="stylesheet">

HTML Code

Paste it the below HTML code in the body section.

<div class="top-content">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" >
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active"> <img  class="d-block w-100"  src="images/slider-1.jpg" alt="First slide"> 
        
        <!-- Slide Text Layer -->
		  <div class="slide_style_left">
				<div class="row" >
				<div class="col-12 slide-text text-center">
					<h1 class="animate__animated animate__lightSpeedInLeft">Bootstrap Carousel</h1>
          			<p  class="animate__animated animate__fadeInUp">Bootstrap now touch enable slide.</p>
          			<a href="#" target="_blank" class="btn btn-warning btn-lg animate__animated animate__fadeInUp" >select one</a> 
		  			<a href="#" target="_blank"  class="btn btn-primary btn-lg animate__animated animate__fadeInUp">select two</a> 
				</div>
				</div>
				</div>
      </div>
      <div class="carousel-item"> <img  class="d-block w-100"  src="images/slider-2.jpg" alt="Second slide"> 
        <!-- Slide Text Layer -->
        <div class="slide_style_right text-center">
			<div class="row" >
				<div class="col-12 slide-text text-center">
       				<h1 class="animate__animated animate__lightSpeedInRight">Bootstrap </h1>
          			<p  class="animate__animated animate__fadeInUp">Bootstrap now touch enable slide.</p>
          			<a href="#" target="_blank" class="btn btn-warning btn-lg animate__animated animate__fadeInUp" >select one</a> 
		  			<a href="#" target="_blank"  class="btn btn-primary btn-lg animate__animated animate__fadeInUp">select two</a>
      				</div>
					</div>
				</div>
		  </div>
      <div class="carousel-item"> <img  class="d-block w-100"  src="images/slider-3.jpg" alt="Third slide"> 
        <!-- Slide Text Layer -->
		  <div class="slide_style_left">
				<div class="row" >
				<div class="col-12 slide-text text-center">
					<h2 class="animate__animated animate__lightSpeedInLeft slide-heading">Bootstrap </h2>
          			<p  class="animate__animated animate__fadeInUp"><small>Bootstrap now touch enable slide.</small></p>
          			<a href="#" target="_blank" class="btn btn-warning  animate__animated animate__fadeInUp" >select one</a> 
				</div>
				</div>
				</div>
		  
		  
		   <!-- Slide Text Layer -->
        <div class="slide_style_right text-center">
			<div class="row" >
				<div class="col-12 slide-text text-center">
       				<h2 class="animate__animated animate__lightSpeedInRight slide-heading-1">Bootstrap Carousel</h2>
          			<p  class="animate__animated animate__fadeInUp"><small>Bootstrap now touch enable slide.</small></p>
		  			<a href="#" target="_blank"  class="btn btn-primary  animate__animated animate__fadeInUp">select two</a>
      				</div>
					</div>
				</div>
      </div>
      <div class="carousel-item"> <img  class="d-block w-100"  src="images/slider-5.jpg" alt="Third slide">
        <div class="slide_style_bottom">
				<div class="row" >
				<div class="col-12 slide-text text-center">
					<h2 class="animate__animated animate__zoomIn mb-4 slide-heading-1">Bootstrap </h2>
          			<a href="#" target="_blank" class="btn btn-danger animate__animated animate__zoomIn" >select one</a> 
				</div>
				</div>
				</div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>

CSS Style

@charset "utf-8";
/* CSS Document */

body {
    padding-top: 0;
    padding-bottom: 0;
}

.top-content {
    width: 100%;
    padding: 0;
}
.top-content .carousel {
    margin-bottom: 0px;
}
.top-content .carousel-control-prev {
    border-bottom: 0;
}
.top-content .carousel-control-next {
    border-bottom: 0;
}

@media (max-width: 767px) {
h1, h2 {
    font-size: 22px;
    line-height: 30px;
}

.top-content .carousel-indicators {
    display: none;
}
}
.top-content .carousel-item {
    height: 100vh;
    min-height: 400px;
}
.top-content .carousel-item img {
    height: 100%;
    object-fit: cover;
}

@media (max-width: 575px) {

.top-content h1, .top-content h2, .top-content h3 {
    font-size: 18px;
}
}

@media (max-width: 575px) {
.top-content .carousel-item {
    max-height: 400px;
}
}
/*---------- SLIDE CAPTION ----------*/
.slide_style_left {
    text-align: left !important;
	left: 0;
    top: 25%;
    margin: auto;
    padding: 10px;
    position: absolute;
    text-align: left;
    padding: 10px 85px;
}
.slide_style_right {
    text-align: right !important;
    top: 25%;
    right: 0;
    margin: auto;
    padding: 10px;
    position: absolute;
    text-align: left;
    padding: 10px 85px;
}
.slide_style_bottom {
    text-align: center !important;
	left: 0;
    bottom:15%;
    right: 0;
    margin: auto;
    padding: 10px;
    position: absolute;
    text-align: left;
    padding: 10px 85px;
}

.slide-text > h1 {
    padding: 0;
    color: #ffffff;
    font-size: 70px;
    font-style: normal;
    line-height: 84px;
    margin-bottom: 30px;
    letter-spacing: 1px;
    display: inline-block;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
	.slide-heading{
		font-size: 40px;
    font-weight: bold;
    color: #f4ac0c;
	 -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
	}
	.slide-heading-1{
	font-size: 40px;
    font-weight: bold;
    color: #fff;
	-webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
	}
.slide-text > p {
    padding: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 24px;
    font-weight: 300;
    margin-bottom: 40px;
    letter-spacing: 1px;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.slide-text > a.btn-default, .slide-text > a.btn-warning, .slide-text > a.btn-danger {
    color: #000;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    margin-right: 10px;
    text-align: center;
    padding: 17px 30px;
    white-space: nowrap;
    letter-spacing: 1px;
    display: inline-block;
    border: none;
    text-transform: uppercase;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a.btn-primary {
    color: #ffffff;
    cursor: pointer;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    margin-left: 10px;
    text-align: center;
    padding: 17px 30px;
    white-space: nowrap;
    letter-spacing: 1px;
    background: #00bfff;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    border: none;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a:hover, .slide-text > a:active {
    color: #ffffff;
    background: #222222;
    -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

Javascript Library

Add the below Javascript library in footer section.

<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

Now save the index.html and check in browsers.

Bootstrap Automatic Slider free (Bootstrap Carousel) full Source Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Carousel Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/carousel.css" rel="stylesheet">
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
	<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="top-content">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" >
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active"> <img  class="d-block w-100"  src="images/slider-1.jpg" alt="First slide"> 
        
        <!-- Slide Text Layer -->
		  <div class="slide_style_left">
				<div class="row" >
				<div class="col-12 slide-text text-center">
					<h1 class="animate__animated animate__lightSpeedInLeft">Bootstrap Carousel</h1>
          			<p  class="animate__animated animate__fadeInUp">Bootstrap now touch enable slide.</p>
          			<a href="#" target="_blank" class="btn btn-warning btn-lg animate__animated animate__fadeInUp" >select one</a> 
		  			<a href="#" target="_blank"  class="btn btn-primary btn-lg animate__animated animate__fadeInUp">select two</a> 
				</div>
				</div>
				</div>
      </div>
      <div class="carousel-item"> <img  class="d-block w-100"  src="images/slider-2.jpg" alt="Second slide"> 
        <!-- Slide Text Layer -->
        <div class="slide_style_right text-center">
			<div class="row" >
				<div class="col-12 slide-text text-center">
       				<h1 class="animate__animated animate__lightSpeedInRight">Bootstrap </h1>
          			<p  class="animate__animated animate__fadeInUp">Bootstrap carousel now touch enable slide.</p>
          			<a href="#" target="_blank" class="btn btn-warning btn-lg animate__animated animate__fadeInUp" >select one</a> 
		  			<a href="#" target="_blank"  class="btn btn-primary btn-lg animate__animated animate__fadeInUp">select two</a>
      				</div>
					</div>
				</div>
		  </div>
      <div class="carousel-item"> <img  class="d-block w-100"  src="images/slider-3.jpg" alt="Third slide"> 
        <!-- Slide Text Layer -->
		  <div class="slide_style_left">
				<div class="row" >
				<div class="col-12 slide-text text-center">
					<h2 class="animate__animated animate__lightSpeedInLeft slide-heading">Bootstrap Carousel</h2>
          			<p  class="animate__animated animate__fadeInUp"><small>Bootstrap now touch enable slide.</small></p>
          			<a href="#" target="_blank" class="btn btn-warning  animate__animated animate__fadeInUp" >select one</a> 
				</div>
				</div>
				</div>
		  
		  
		   <!-- Slide Text Layer -->
        <div class="slide_style_right text-center">
			<div class="row" >
				<div class="col-12 slide-text text-center">
       				<h2 class="animate__animated animate__lightSpeedInRight slide-heading-1">Bootstrap Carousel</h2>
          			<p  class="animate__animated animate__fadeInUp"><small>Bootstrap now touch enable slide.</small></p>
		  			<a href="#" target="_blank"  class="btn btn-primary  animate__animated animate__fadeInUp">select two</a>
      				</div>
					</div>
				</div>
      </div>
      <div class="carousel-item"> <img  class="d-block w-100"  src="images/slider-5.jpg" alt="Third slide">
        <div class="slide_style_bottom">
				<div class="row" >
				<div class="col-12 slide-text text-center">
					<h2 class="animate__animated animate__zoomIn mb-4 slide-heading-1">Bootstrap </h2>
          			<a href="#" target="_blank" class="btn btn-danger animate__animated animate__zoomIn" >select one</a> 
				</div>
				</div>
				</div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
</div>
<!-- Bootstrap core JavaScript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap Automatic Slider free Download

Bootstrap Automatic Slider free (Bootstrap Carousel) Download Source code, Demo available at bottom

Bootstrap Carousel Slider Features

Following steps to create Bootstrap Carousel are:

HTML Code

CSS Style

Javascript Library

Bootstrap Automatic Slider free (Bootstrap Carousel) full Source Code

Read Also

How to Create Bootstrap 5 Cards Templates

Bootstrap 4 slider with text animation Download

Jquery Automatic Image Slider Source Code Free Download

Related Post

Owl Carousel Product Slider in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Testimonials HTML Template Free Download

Bootstrap Table with Pagination and Search

Attractive Responsive Testimonials Carousel

How To Make Responsive Testimonial Slider

Leave a Reply Cancel reply

Search

Donate

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement

Quick Links

Important Links

Share on

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Bootstrap Automatic Slider free (Bootstrap Carousel) Download Source code, Demo available at bottom

Bootstrap Carousel Slider Features

Following steps to create Bootstrap Carousel are:

HTML Code

CSS Style

Javascript Library

Bootstrap Automatic Slider free (Bootstrap Carousel) full Source Code

Read Also

Share this:

Related Post

Leave a Reply Cancel reply

Search

Donate

Categories

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement