Responsive Carousel Slider Bootstrap 5 Example

Published October 25, 2021


In this bootstrap5 example we will create a simple responsive carousel slider with bootstrap5. This Responsive Carousel Slider is  fully highly customizable and Carousel Slider. We can use this carousel to display products on our website, YouTube or Vimeo videos which will help to display video galleries on our web pages.

This simple Responsive carousel slider consist this features like

  • Fully Customizable
  • Touch swipes navigation
  • Infinity loop to slides navigation
  • Fully Responsive
  • Mobile Supported

 

Let's see the code for Carousel Slider with bootstrap5

We have this below folder structure for this bootstrap sample

Bootstrap5 carousel example

View Demo

 

 

Responsive Carousel Slider example

index.html file code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Carousel | Free Download</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="carousel.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="slider" class="pt-5">
  <div class="container">
    <h1 class="text-center"><b>Bootstrap5 Responsive Carousel</b></h1>
     <div class="slider">
            <div class="owl-carousel">
               <div class="slider-card">
                  <div class="d-flex justify-content-center align-items-center mb-4">
                            <a href="https://rrtutors.com/language/Flutter"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVLok3wTCoxYK-3iA8jKctAxS3yB0RnaZKeA&usqp=CAU" alt="" ></a>
                  </div>
                  <h5 class="mb-0 text-center"><b>Flutter Tutorials</b></h5>

                  <p class="text-center p-4">
Flutter is an open source framework to create high quality, high performance mobile applications across mobile operating systems </p>
               </div>

                    <div class="slider-card">
                  <div class="d-flex justify-content-center align-items-center mb-4">
                  <a href="https://rrtutors.com/Dart">   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbeoD7R8t-VfbljVCnxD6gZe0pCl2xFVQeXg&usqp=CAU" alt="" >
                  </a></div>
                  <h5 class="mb-0 text-center"><b>Dart Tutorials</b></h5>

                  <p class="text-center p-4">
Dart is an open-source, class-based, optionally-typed programming language for building web applications--on both the client and server--created by Google.\
                       </p>
               </div>


                    <div class="slider-card">
                  <div class="d-flex justify-content-center align-items-center mb-4">
                            <a href="https://rrtutors.com/c/"><img src="https://rrtutors.com/uploads/langpostimg/c-bms.png" alt="" ></a>
                  </div>
                  <h5 class="mb-0 text-center"><b>C Projects Tutorials</b></h5>

                  <p class="text-center p-4">

                        Programming is exciting and interesting if you have the right logic. As technology moves forward, you must get familiarized with the coding part. C language is suitable for system programming, it was invented by Dennis Ritchie</p>
               </div>


                    <div class="slider-card">
                  <div class="d-flex justify-content-center align-items-center mb-4">
                     <a href="https://rrtutors.com/bootstrap5"><img src="https://rrtutors.com/uploads/langpostimg/bootstrap-logo.JPG" alt="" >
                  </a></div>
                  <h5 class="mb-0 text-center"><b>Bootstrap5 Tutorials</b></h5>

                  <p class="text-center p-4">
Bootstrap is possibly the most used framework to design websites due to its versatility of use. Even, many website users have already replaced the CSS and JS of Bootstrap 5 obtaining
                       </p>
               </div>


            </div>
         </div>
  </div>
</section>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>
   <script src="js/carousel.min.js"></script>
   <script src="js/script.js"></script>
</body>
</html>

 

style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK&display=swap');
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Sans HK', sans-serif;
  background: #e3bd61;
}
.slider {
  margin-bottom: 30px;
  position: relative;
}
h1{
color: #FFF;}
.slider .owl-item.active.center .slider-card {
  transform: scale(1.15);
  opacity: 1;
  background: #ff9966; /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #ff5e62, #ff9966); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #ff5e62, #ff9966); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #fff;
}
.slider-card {
  background: #fff;
  padding: 0px 0px;
  margin: 50px 15px 90px 15px;
  border-radius: 5px;
  box-shadow: 0 15px 45px -20px rgb(0 0 0 / 73%);
  transform: scale(0.9);
  opacity: 0.5;
  transition: all 0.3s;
}
.slider-card img {
  border-radius: 5px 5px 0px 0px;
}
.owl-nav .owl-prev {
  position: absolute;
  top: calc(50% - 25px);
  left: 0;
  opacity: 1;
  font-size: 30px !important;
  z-index: 1;
}
.owl-nav .owl-next {
  position: absolute;
  top: calc(50% - 25px);
  right: 0;
  opacity: 1;
  font-size: 30px !important;
  z-index: 1;
}
.owl-dots {
  text-align: center;
}
.owl-dots .owl-dot {
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: #fff !important;
  margin-left: 3px;
  margin-right: 3px;
  outline: none;
}
.owl-dots .owl-dot.active {
  background: #f44336 !important;
}
.text-center{
overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;    /* fallback */
   max-height: 100px;      /* fallback */
   -webkit-line-clamp: 4; /* number of lines to show */
   -webkit-box-orient: vertical;
}

 

script.js

// Owlcarousel
$(document).ready(function(){
  $(".owl-carousel").owlCarousel({
   loop:true,
    margin:10,
    nav:true,
   autoplay:true,
    autoplayTimeout:3000,
    autoplayHoverPause:true,
    center: true,
    navText: [
       "<i class='fa fa-angle-left'></i>",
       "<i class='fa fa-angle-right'></i>"
   ],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:3
        }
    }
  });
});

 

Bootstrap5 responsive carousel example

 

 

Conclusion: In this bootstrap5 tutorial we created responsive highly customizable carousel slider with infinite loop navigate slides.

 

 

Download Source code

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

94 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions