Bootstrap 5: Slider/Carousel Products
P粉214176639
P粉214176639 2024-03-26 19:24:34
0
1
520

I am trying to use Bootstrap5 to create a slider/carousel product as shown in the following screen:

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 looks bad:

Only one item is displayed, but I need to display three and a half like this. I also tried adding under the photo price and product title and the image must have

P粉214176639
P粉214176639

reply all(1)
P粉066725148

If you are searching for this you can find this Codepen and this Codeply.

Combining the two gives you a working example (Codepen).

JS clones the contents of each .carousel-item, so each .carousel-item will hold the contents of its (5) siblings. CSS changes Transform so that the slider moves accordingly.

it

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template