Modal Carousel Slider Using Bootstrap 5

by
Modal Carousel Slider Using Bootstrap 5
Code Snippet:modal slider
Author: faizaharb
Published: January 14, 2024
Last Updated: January 22, 2024
Downloads: 3,950
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (File not found!)

This code creates a modal carousel slider using Bootstrap 5, allowing you to showcase a series of items with images.

It works by displaying a set of items in a grid layout. When you click on an item, it opens a modal overlay with navigation buttons (left and right arrows) to view the items as a carousel.

This code is helpful for showcasing multiple items or images in an interactive way, making it easy for users to navigate through them in a modal view.

How to Create Modal Carousel Slider Using Bootstrap 5

1. First of all, load the Bootstrap CSS and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.

  1. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  2. <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  3. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha512-L7MWcK7FNPcwNqnLdZq86lTHYLdQqZaz5YcAgE+5cnGmlw8JT03QB2+oxL100UeB6RlzZLUxCGSS4/++mNZdxw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. In your HTML file, create the necessary structure for your modal carousel slider. You can place the following code within the <body> tag of your HTML file.

  1. <section class="slider my-5">
  2.   <div class="container">
  3.     <div class="row gy-4">
  4.       <div class="col-md-4">
  5.         <div class="item position-relative">
  6.           <div class="img-item">
  7.             <img src="https://i1.sndcdn.com/artworks-YxGUGES6DrzzCUGx-Gx32ZQ-t240x240.jpg" alt="item photo" class="w-100">
  8.           </div>
  9.           <div class="content-item text-center p-2 bg-white position-absolute">
  10.             <h4>item title</h4>
  11.             <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
  12.           </div>
  13.         </div>
  14.       </div>
  15.       <div class="col-md-4">
  16.         <div class="item position-relative">
  17.           <div class="img-item">
  18.             <img src="https://upload-assets.vice.com/files/2016/03/26/1459014592Basketball.png" alt="item photo" class="w-100">
  19.           </div>
  20.           <div class="content-item text-center p-2 bg-white position-absolute">
  21.             <h4>item title</h4>
  22.             <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
  23.           </div>
  24.         </div>
  25.       </div>
  26.       <div class="col-md-4">
  27.         <div class="item position-relative">
  28.           <div class="img-item">
  29.             <img src="https://f4.bcbits.com/img/a2933723780_10.jpg" alt="item photo" class="w-100">
  30.           </div>
  31.           <div class="content-item text-center p-2 bg-white position-absolute">
  32.             <h4>item title</h4>
  33.             <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
  34.           </div>
  35.         </div>
  36.       </div>
  37.       <div class="col-md-4 ">
  38.         <div class="item position-relative">
  39.           <div class="img-item">
  40.             <img src="https://inspgr.id/app/uploads/2016/03/3d-grand-chamaco-08.jpg" alt="item photo" class="w-100">
  41.           </div>
  42.           <div class="content-item text-center p-2 bg-white position-absolute">
  43.             <h4>item title</h4>
  44.             <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
  45.           </div>
  46.         </div>
  47.       </div>
  48.       <div class="col-md-4 ">
  49.         <div class="item position-relative">
  50.           <div class="img-item">
  51.             <img src="https://images.squarespace-cdn.com/content/v1/53b208ace4b0dc3e7be6ec30/1515709148266-LIUT0GA35774NMFJG036/ke17ZwdGBToddI8pDm48kBtpJ0h6oTA_T7DonTC8zFdZw-zPPgdn4jUwVcJE1ZvWQUxwkmyExglNqGp0IvTJZamWLI2zvYWH8K3-s_4yszcp2ryTI0HqTOaaUohrI8PIWkiAYz5ghgEgSGJuDQ4e1ZKXpRdhEMT7SgthRpD0vyIKMshLAGzx4R3EDFOm1kBS/H20Bounce.jpg" alt="item photo" class="w-100">
  52.           </div>
  53.           <div class="content-item text-center p-2 bg-white position-absolute">
  54.             <h4>item title</h4>
  55.             <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
  56.           </div>
  57.         </div>
  58.       </div>
  59.       <div class="col-md-4 ">
  60.         <div class="item position-relative">
  61.           <div class="img-item">
  62.             <img src="https://www.webdesignertrends.com/wp-content/uploads/2015/01/el-grand-chamacon-24.jpg" alt="item photo" class="w-100">
  63.           </div>
  64.           <div class="content-item text-center p-2 bg-white position-absolute">
  65.             <h4>item title</h4>
  66.             <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
  67.           </div>
  68.         </div>
  69.       </div>
  70.     </div>
  71.   </div>
  72.   <div class="modal-layer position-fixed justify-content-center align-items-center">
  73.     <div class="slide-img w-75 h-75 d-flex align-items-center justify-content-between px-4 position-relative">
  74.       <i id="closeBtn" class="far fa-times-circle fa-2x position-absolute end-0 top-0 m-4"></i>
  75.       <i id="prev" class="fas fa-chevron-left fa-2x"></i>
  76.       <i id="next" class="fas fa-chevron-right fa-2x"></i>
  77.     </div>
  78.   </div>
  79. </section>

3. You can apply custom CSS styles to the slider and items as needed to match your website’s design. Modify the CSS code to achieve your desired look and feel.

  1. section .content-item {
  2.   width: 80%;
  3.   left: 10%;
  4.   bottom: 10%;
  5. }
  6. section .modal-layer {
  7.   inset: 0;
  8.   background: rgba(0, 0, 0, 0.6);
  9.   display: none;
  10. }
  11. section .modal-layer .slide-img {
  12.   background-image: url(https://i1.sndcdn.com/artworks-YxGUGES6DrzzCUGx-Gx32ZQ-t240x240.jpg);
  13.   background-size: cover;
  14.   background-position: 50% 50%;
  15.   background-repeat: no-repeat;
  16. }

4. Load the Bootstrap JS by adding the following script just before closing the body tag:

  1. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

5. Finally, add the following JavaScript code to enable the modal carousel slider’s functionality. This code handles item click events, navigation, and keyboard controls.

  1. // variables
  2. // items & images
  3. let itemsImgs = document.querySelectorAll(".img-item img");
  4. itemsImgsArr = Array.from(itemsImgs);
  5.  
  6. // pop slider
  7. let popSlider = document.querySelector("section .modal-layer");
  8. let bgSlide = document.querySelector(".modal-layer .slide-img");
  9.  
  10. // icons/buttons
  11. // close
  12. let closeBtn = document.querySelector("#closeBtn");
  13. closeBtn.style.cssText = `cursor : pointer;`;
  14. // left
  15. let prevBtn = document.querySelector("#prev");
  16. prevBtn.style.cssText = `cursor : pointer;`;
  17. // right
  18. let nextBtn = document.querySelector("#next");
  19. nextBtn.style.cssText = `cursor : pointer;`;
  20.  
  21. // index of item
  22. let activeIndex;
  23.  
  24. for (let i = 0; i < itemsImgs.length; i++) {
  25.   itemsImgs[i].addEventListener("click", function (e) {
  26.     popSlider.style.display = "flex";
  27.     let activeSrc = e.target.src;
  28.     bgSlide.style.backgroundImage = `url(${activeSrc})`;
  29.     activeIndex = itemsImgsArr.indexOf(e.target);
  30.   });
  31. }
  32.  
  33. closeBtn.addEventListener("click", removeSlider);
  34.  
  35. function removeSlider() {
  36.   popSlider.style.display = "none";
  37. }
  38.  
  39. nextBtn.addEventListener("click", nextSlider);
  40.  
  41. function nextSlider() {
  42.   activeIndex++;
  43.   if (activeIndex == itemsImgs.length) {
  44.     activeIndex = 0;
  45.   }
  46.   let imgSrc = itemsImgsArr[activeIndex].src;
  47.   bgSlide.style.backgroundImage = `url(${imgSrc})`;
  48. }
  49.  
  50. prevBtn.addEventListener("click", prevSlider);
  51.  
  52. function prevSlider() {
  53.   activeIndex--;
  54.   if (activeIndex < 0) {
  55.     activeIndex = itemsImgs.length - 1;
  56.   }
  57.   let imgSrc = itemsImgsArr[activeIndex].src;
  58.   bgSlide.style.backgroundImage = `url(${imgSrc})`;
  59. }
  60.  
  61. // keyboard events
  62. document.addEventListener("keydown", function (e) {
  63.   if (e.key == "Escape") {
  64.     removeSlider();
  65.   } else if (e.key == "ArrowRight") {
  66.     nextSlider();
  67.   } else if (e.key == "ArrowLeft") {
  68.     prevSlider();
  69.   }
  70. });

That’s all! hopefully, you have successfully created a Modal Carousel Slider using Bootstrap 5. If you have any questions or suggestions, feel free to comment below.

Similar Code Snippets:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X