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

Live Demo
Download

Related Post

Owl Carousel Product Slider in HTML5
December 13, 2022
HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details
jQuery Carousel Slider With Accordion Style Transitions
June 6, 2022
HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details
Testimonials HTML Template Free Download
January 15, 2022
HTMLCSS

Testimonials HTML Template Free Download

Know Details
Bootstrap Table with Pagination and Search
January 9, 2022
HTMLCSS

Bootstrap Table with Pagination and Search

Know Details
Attractive Responsive Testimonials Carousel
December 8, 2021
HTMLCSS

Attractive Responsive Testimonials Carousel

Know Details
How To Make Responsive Testimonial Slider
December 7, 2021
HTMLCSS

How To Make Responsive Testimonial Slider

Know Details

Leave a Reply

Your email address will not be published. Required fields are marked *