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.