Bootstrap 5: slider / 轮播产品
[英]Bootstrap 5: slider / carousel products
问题描述
我尝试使用 Bootstrap5 在屏幕下方创建 slider / carousel 产品：
我在这里粘贴，这是我当前的代码：
<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 -->
但目前这看起来很糟糕：
只显示一个项目，但我需要像这样显示 3 个项目和一半。 我也尝试在照片价格和产品标题下添加，并且图像必须具有响应性。 谁能帮我更正这段代码？
1 个解决方案
解决方案1
1 已采纳 2023-01-19 23:53:34
如果你要搜索这个，你可以找到这个 Codepen和这个 Codeply 。
将两者结合起来可以为您提供一个工作示例（Codepen）。
JS 克隆每个.carousel-item的内容，因此每个.carousel-item将保存其 (5) 个兄弟项的内容。 CSS 改变transform ，所以 slider 相应地移动。
它也通过仅在最小断点之前显示一个项目来响应，但这可以很容易地调整（仅限 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; }
<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轮播段落滑块
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.