Bootstrap 5: slider / carousel products
Question
I try create slider / carousel products like this below screen using Bootstrap5:
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. Also I try add under photo price and product title and image must be responsive. Can anyone little help me correct this code?
1 answers
solution1
1 ACCPTED 2023-01-19 23:53:34
If you were to search for this you can find this Codepen and this Codeply .
Combining the two gives you a working example here (Codepen).
The JS clones the content of each .carousel-item , so each .carousel-item will hold the content of its (5) siblings. The CSS changes the transform so the slider moves accordingly.
It's also responsive by only showing one item before the smallest breakpoint, but this can be easily adjusted (CSS only).
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 .
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap Carousel Paragraph Slider
bootstrap carousel slider with text
Scrollable Bootstrap Carousel/Slider
Bootstrap Carousel slider and hammer library
My bootstrap carousel slider is not working
How bootstrap slider/carousel maximize on div?
how to synchronize two carousel slider - Twitter Bootstrap
how to fixed a navbar and Carousel image slider in bootstrap
Carousel slider does not work after bootstrap 4 update with
Bootstrap 3 Carousel/Slider IE9 Support
Related Tags