Bootstrap 5: slider / carousel products

Question

I try create slider / carousel products like this below screen using Bootstrap5:

Here I paste, This is my current code:




  Bootstrap 5 Example
  
  
  
  





    
       
      
    

    
        
            
        
        
            
        
        
                      
        
    
    
        
        Previous
    
    
        
        Next
    

      
      
      
          
    

    
        
            
        
        
            
        
        
                      
        
    
    
        
        Previous
    
    
        
        Next

But currently this look like bad:

Display only one item, but I need display like this 3 items and half. Also I try add under photo price and product title and image must be responsive. Can anyone little help me correct this code?

Cooleronie · Accepted Answer

If you were to search for this you can find this Codepen and this Codeply.

Combining the two gives you a working example here (Codepen).

The JS clones the content of each .carousel-item, so each .carousel-item will hold the content of its (5) siblings. The CSS changes the transform so the slider moves accordingly.

It's also responsive by only showing one item before the smallest breakpoint, but this can be easily adjusted (CSS only).

Here it is in a snippet, view it in full screen using the "Full page" link:

Note: had to add a bunch of !important in the CSS which is not needed if you load your CSS after Bootstrap's, like in the Codepen.

let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {
  const minPerSlide = 5
  let next = el.nextElementSibling
  for (var i = 1; i < minPerSlide; i++) {
    if (!next) {
      // wrap carousel by using first child
      next = items[0]
    }
    let cloneChild = next.cloneNode(true)
    el.appendChild(cloneChild.children[0])
    next = next.nextElementSibling
  }
})

.carousel-item .col {
  padding: 0 5px;
}

@media (max-width: 767px) {
  .carousel-inner .carousel-item>div {
    display: none !important;
  }
  .carousel-inner .carousel-item>div:first-child {
    display: block !important;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex !important;
}


/* medium and up screens */

@media (min-width: 768px) {
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(20%) !important;
  }
  .carousel-inner .carousel-item-start.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-20%) !important;
  }
  /*  half slides CSS */
  .carousel-inner:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 85%;
    left: 0;
    content: "";
    display: block;
    background-color: #fff;
    z-index: 2;
  }
  .carousel-inner:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 85%;
    content: "";
    display: block;
    background-color: #fff;
    z-index: 2;
  }
  .carousel-control-prev {
    left: 12% !important;
  }
  .carousel-control-next {
    right: 12% !important;
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
  transform: translateX(0) !important;
}





  
    
      
        
          
            
              
              
                Card title
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
              
            
          
        
        
          
            
              
              
                Card title
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
              
            

          
        
        
          
            
              
              
                Card title
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
              
            
          
        
        
          
            
              
              
                Card title
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
              
            
          
        
        
          
            
              
              
                Card title
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
              
            
          
        
        
          
            
              
              
                Card title
                This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Bootstrap 5: slider / carousel products

Answers (1)

Combining the two gives you a working example here (Codepen).

Related Questions