Bootstrap 5: slider / 轮播产品

Question

I try create slider / carousel products like this below screen using Bootstrap5:我尝试使用 Bootstrap5 在屏幕下方创建 slider / carousel 产品：

Here I paste, This is my current 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 -->

But currently this look like bad:但目前这看起来很糟糕：

Display only one item, but I need display like this 3 items and half.只显示一个项目，但我需要像这样显示 3 个项目和一半。 Also I try add under photo price and product title and image must be responsive.我也尝试在照片价格和产品标题下添加，并且图像必须具有响应性。 Can anyone little help me correct this code?谁能帮我更正这段代码？

Answer 1

If you were to search for this you can find this Codepen and this Codeply .如果你要搜索这个，你可以找到这个 Codepen和这个 Codeply 。

Combining the two gives you a working example here (Codepen).将两者结合起来可以为您提供一个工作示例（Codepen）。

The JS clones the content of each .carousel-item , so each .carousel-item will hold the content of its (5) siblings. JS 克隆每个.carousel-item的内容，因此每个.carousel-item将保存其 (5) 个兄弟项的内容。 The CSS changes the transform so the slider moves accordingly. CSS 改变transform ，所以 slider 相应地移动。

It's also responsive by only showing one item before the smallest breakpoint, but this can be easily adjusted (CSS only).它也通过仅在最小断点之前显示一个项目来响应，但这可以很容易地调整（仅限 CSS）。

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 .注意：必须在 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; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> <div class="container"> <div class="row justify-content-center"> <div id="carouselExampleControls" class="carousel carousel-dark slide"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <div class="col"> <div class="card"> <img src="https://via.placeholder.com/700x500.png/CB997E/333333?text=1" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col"> <div class="card"> <img src="https://via.placeholder.com/700x500.png/DDBEA9/333333?text=2" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col"> <div class="card"> <img src="https://via.placeholder.com/700x500.png/FFE8D6/333333?text=3" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col"> <div class="card"> <img src="https://via.placeholder.com/700x500.png/B7B7A4/333333?text=4" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col"> <div class="card"> <img src="https://via.placeholder.com/700x500.png/A5A58D/333333?text=5" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col"> <div class="card"> <img src="https://via.placeholder.com/700x500.png/6B705C/eeeeee?text=6" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div> </div> <a class="carousel-control-prev bg-transparent w-aut" href="#carouselExampleControls" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next bg-transparent w-aut" href="#carouselExampleControls" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> </div> </div>

Bootstrap 5: slider / 轮播产品

问题描述

1 个解决方案

解决方案1
1 已采纳 2023-01-19 23:53:34

Combining the two gives you a working example here (Codepen).将两者结合起来可以为您提供一个工作示例（Codepen）。

Bootstrap 5: slider / 轮播产品

问题描述

1 个解决方案

解决方案1 1 已采纳 2023-01-19 23:53:34

Combining the two gives you a working example here (Codepen).将两者结合起来可以为您提供一个工作示例（Codepen）。

解决方案1
1 已采纳 2023-01-19 23:53:34