Bootstrap Automatic Slider free Download

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

Bootstrap Automatic Slider free (Bootstrap Carousel) Download Source code

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.

  1. Image Slider (Add Multiple Images)
  2. Full Width Slider
  3. Bootstrap Slider
  4. Navigation (next/prev) option available
  5. Add unlimited Images
  6. Captions and Title
  7. Add Hyperlinks for redirection
  8. Automatic Slideshow
  9. Bootstrap Carousel slideshow
  10. Carousel Indicators
Bootstrap Carousel

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

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>

Read Also

How to Create Bootstrap 5 Cards Templates

Bootstrap 4 slider with text animation Download

Jquery Automatic Image Slider Source Code Free Download