
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 Automatic Slider features are listed below.
Create index.html and paste it the below Boostrap library file in the header section.
1 2 3 4 5 6 |
<!-- 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="<a href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" target="_blank" rel="noreferrer noopener">https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css</a>" /> <link href="css/style.css" rel="stylesheet"> |
Paste it the below HTML code in the body section.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 |
@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; } |
Add the below Javascript library in footer section.
1 2 3 |
<!-- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!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> |