Carrousel Bootstrap 5 personnalisé sur mobile (plusieurs éléments, mais pas sur une seule ligne)

Question

Je ne parviens pas à personnaliser la disposition du carrousel sur les appareils mobiles. Je veux qu'il affiche chaque élément du carrousel sur mobile au lieu d'un seul, mais après avoir essayé du CSS et du JS, en utilisant spécifiquement display max-witdh Je commence tout juste à penser que ce n'est pas possible ou je ne sais pas où chercher/regarder le mauvais emplacement/attribut. J'ai inclus deux images pour que vous puissiez voir ce que j'essaie de réaliser.

Ce que je souhaite réaliser :

Ce que j'ai :

L'exemple de code HTML est très basique, je n'inclus pas le CSS car il est uniquement destiné à des fins de conception.

<div id="solutions-carousel" class="diapositive du carrousel d-block d-md-none">
<div class="carrousel-inner">
<div class="élément-carrousel actif">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="élément-carrousel">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="élément-carrousel actif">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="élément-carrousel actif">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="élément-carrousel actif">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="indicateurs-carrousel">
  <type de bouton="bouton" data-bs-target="#solutions-carrousel" data-bs-slide-to="0" classe = "actif" aria-current = "vrai" aria-label="Diapositive 1"></bouton>
  <type de bouton="bouton" data-bs-target="#solutions-carrousel" data-bs-slide-to="1" aria-label="Diapositive 2"></bouton>
  <type de bouton="bouton" data-bs-target="#solutions-carrousel" data-bs-slide-to="2" aria-label="Diapositive 3"></bouton>
  <type de bouton="bouton" data-bs-target="#solutions-carrousel" data-bs-slide-to="3" aria-label="Diapositive 3"></bouton>
  <type de bouton="bouton" data-bs-target="#solutions-carrousel" data-bs-slide-to="4" aria-label="Diapositive 3"></bouton>
 </div>

Answer 1

Je pense que des questions et des cas similaires ont déjà reçu une réponse dans un autre fil de discussion. J'ai trouvé quelques références qui pourraient vous être utiles et je vais vous donner quelques liens. Un autre fil de discussion dans stackoverflow

Vous pouvez également utiliser le code JS suivant :

$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

Avertissement : ces réponses/extraits de code ne sont pas les miens. Je l'ai eu de Maurice Melchers https://codepen.io/mephysto/pen/ZYVKRY