Bootstrap 5: Slider-/Karussellprodukte

Question

Ich versuche, mit Bootstrap5 ein Slider-/Karussellprodukt wie den folgenden Bildschirm zu erstellen: Hier füge ich ein, das ist mein aktueller Code:

P粉066725148 · Answer

如果您要搜索此内容，您可以找到此Codepen和此 Codeply。

将两者结合起来可以为您提供一个工作示例（Codepen）。

JS 克隆每个 .carousel-item 的内容，因此每个 .carousel-item 将保存其 (5) 个同级的内容。 CSS 更改变换，以便滑块相应移动。

它还具有响应能力，仅在最小断点之前显示一项，但这可以轻松调整（仅限 CSS）。

这是一个片段，使用“全页”链接全屏查看它：

注意：必须在 CSS 中添加一堆 !important ，如果您在 Bootstrap 之后加载 CSS，则不需要，例如 Codepen。

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

items.forEach((el) => {
  const minPerSlide = 5
  let next = el.nextElementSibling
  for (var i = 1; i 
.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.