Benutzerdefiniertes Bootstrap 5-Karussell auf Mobilgeräten (mehrere Elemente, aber nicht in einer Reihe)

Question

Ich habe Probleme beim Anpassen des Karussell-Layouts auf Mobilgeräten. Ich möchte, dass jedes Element des Karussells angezeigt wird, anstatt nur eines, aber nachdem ich etwas CSS und JS ausprobiert habe, insbesondere mit display max-witdh Ich fange gerade an zu denken, dass das nicht möglich ist, oder ich weiß nicht, wo ich nach der falschen Stelle/dem falschen Attribut suchen soll. Ich habe zwei Bilder beigefügt, damit Sie sehen können, was ich erreichen möchte.

Was ich erreichen möchte:

Was ich habe:

Der Beispiel-HTML-Code ist sehr einfach, ich füge CSS nicht hinzu, da dies nur Designzwecken dient.

<div id="solutions-carousel" class="carousel slide d-block d-md-none">
<div class="carousel-inner">
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png"
  <a href="#">text</a>
</div>
<div class="carousel-item">
  <a href="#" class="img-link"><img src="./img.png"
  <a href="#">text</a>
</div>
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png"
  <a href="#">text</a>
</div>
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png"
  <a href="#">text</a>
</div>
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png"
  <a href="#">text</a>
</div>
<div class="carousel-indicators">
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="0" class="aktiv" aria-current="true" aria-label="Folie 1"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="Folie 2"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="2" aria-label="Folie 3"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="3" aria-label="Folie 3"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="4" aria-label="Folie 3"></button>
 </div>

有什么想法吗？干杯（并对糟糕的英语表示歉意）.

Answer 1

我认为类似的问题和案例之前已经在另一个线程中得到了回答。我找到了一些可能对您有帮助的参考资料，我会给您一些链接。 stackoverflow 中的另一个线程

您还可以使用以下 JS 代码：

$('.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));
  }
});

免责声明：这些答案/代码片段不是我的。我从 Maurice melchers 的 https://codepen.io/mephysto/pen/ZYVKRY 得到它