communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Bootstrap 5 : Produits Slider/Carrousel
P粉214176639
P粉214176639 2024-03-26 19:24:34
0
1
521

J'essaie d'utiliser Bootstrap5 pour créer un produit slider/carrousel comme indiqué dans l'écran suivant :

Ici je colle, voici mon code actuel : 

<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 -->

Mais actuellement, cela semble mauvais :

Un seul élément est affiché, mais je dois en afficher trois et demi comme ceci. J'ai également essayé d'ajouter sous la photo le prix et le titre du produit et l'image devait être réactive. Quelqu'un peut-il m'aider à corriger ce code ?

P粉214176639
P粉214176639

répondre à tous(1)
P粉066725148
P粉0667251482024-03-27 09:05:03 1 plancher

Si vous recherchez ceci, vous pouvez trouver ce Codepen et ce Codeply.

La combinaison des deux vous donne un exemple fonctionnel (Codepen).

JS clone chacun .carousel-item 的内容，因此每个 .carousel-item 将保存其 (5) 个同级的内容。 CSS 更改变换 afin que le curseur se déplace en conséquence.

Il est également réactif et affiche un élément uniquement jusqu'au point d'arrêt minimum, mais cela peut être facilement ajusté (CSS uniquement).

Ceci est un extrait, utilisez le lien "Pleine page" pour le voir en plein écran :

Remarque : Un tas de !important doivent être ajoutés au CSS, ce qui n'est pas nécessaire si vous chargez le CSS après Bootstrap, comme Codepen. 

let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {
  const minPerSlide = 5
  let next = el.nextElementSibling
  for (var i = 1; i 

.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;
}



sssccc
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal