suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Bootstrap 5: Slider-/Karussellprodukte

Ich versuche, Bootstrap5 zu verwenden, um ein Slider-/Karussellprodukt zu erstellen, wie im folgenden Bildschirm gezeigt:

Hier füge ich ein, das ist mein aktueller Code: 

<style>
<!-- Temporary -->
.carousel-control-next-icon {
    background: black;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!-- Home Section End -->
<div class="container-fluid mt-3">
    <div class="row g-4">
      <div class="col-xl-6 col-md-4 ratio_medium d-sm-block d-none"> 
      <div class="home-section bg-white div-content" style="height:236px;">
    <!-- With Captions -->
<div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
        </div>
        <div class="carousel-item active">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
        </div>
        <div class="carousel-item">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">          
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-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="#carouselExampleCaption" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
      </div>
      </div>
      <div class="col-xl-6 ratio_65 d-xl-block d-none">
          <div class="home-section bg-white div-content" style="height:236px;">
    <!-- With Captions -->
<div id="carouselExampleCaption2" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
        </div>
        <div class="carousel-item active">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">
        </div>
        <div class="carousel-item">
            <img src="https://img.freepik.com/free-photo/elegant-watch-with-silver-golden-chain-isolated_181624-27080.jpg?w=740&t=st=1674127568~exp=1674128168~hmac=5ce04dff715884c11a1cddc3e0a50b7c625fedf703c03ed40824dd972da0f012" style="width:20%;" alt="" class="d-block img-fluid mx-auto">          
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaption2" role="button" data-bs-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="#carouselExampleCaption2" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
      </div>
      </div>
    </div>
  </div>
<!-- Home Section End -->

Aber aktuell sieht das schlecht aus:

Es wird nur ein Element angezeigt, aber ich muss dreieinhalb auf diese Weise anzeigen. Ich habe auch versucht, unter dem Foto den Preis und den Produkttitel hinzuzufügen, und das Bild musste responsiv sein. Kann mir jemand helfen, diesen Code zu korrigieren?

P粉214176639P粉214176639305 Tage vor554

Antworte allen(1)Ich werde antworten

  • P粉066725148

    P粉0667251482024-03-27 09:05:03

    如果您要搜索此内容，您可以找到此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 < 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;
}

    Antwort
    0
  • StornierenAntwort