Karusel Bootstrap 5 tersuai pada mudah alih (berbilang item, tetapi bukan dalam satu baris)

Question

Saya menghadapi masalah cuba menyesuaikan reka letak karusel pada peranti mudah alih. Saya mahu ia menunjukkan setiap item karusel pada mudah alih dan bukannya satu sahaja, tetapi selepas mencuba beberapa CSS dan JS, khususnya menggunakan paparan /kod> max-witdh Saya baru mula fikir ini tidak mungkin atau saya tidak tahu di mana hendak melihat/melihat lokasi/atribut yang salah. Saya telah memasukkan dua imej supaya anda boleh melihat perkara yang saya cuba capai.

Apa yang saya ingin capai:

Apa yang saya ada:

Kod html sampel adalah sangat asas, saya tidak memasukkan CSS kerana ini hanya untuk tujuan reka bentuk.

<div id="solutions-carousel"class="carousel slaid d-block d-md-none">
<div class="karusel-dalaman">
<div class="item karusel aktif">
  <a href="#"class="img-link"><img src="./img.png"
  <a href="#">teks</a>
</div>
<div class="karusel-item">
  <a href="#"class="img-link"><img src="./img.png"
  <a href="#">teks</a>
</div>
<div class="item karusel aktif">
  <a href="#"class="img-link"><img src="./img.png"
  <a href="#">teks</a>
</div>
<div class="item karusel aktif">
  <a href="#"class="img-link"><img src="./img.png"
  <a href="#">teks</a>
</div>
<div class="item karusel aktif">
  <a href="#"class="img-link"><img src="./img.png"
  <a href="#">teks</a>
</div>
<kelas div="penunjuk karusel">
  <jenis butang="butang" data-bs-target="#solutions-carousel" data-bs-slide-to="0" kelas="aktif" aria-current="benar" aria-label="Slaid 1"></button>
  <jenis butang="butang" data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="Slaid 2"></button>
  <jenis butang="butang" data-bs-target="#solutions-carousel" data-bs-slide-to="2" aria-label="Slaid 3"></button>
  <jenis butang="butang" data-bs-target="#solutions-carousel" data-bs-slide-to="3" aria-label="Slaid 3"></button>
  <jenis butang="butang" data-bs-target="#solutions-carousel" data-bs-slide-to="4" aria-label="Slaid 3"></button>
 </div>

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

Answer 1

Saya rasa soalan dan kes yang serupa telah dijawab sebelum ini di thread lain. Saya menemui beberapa rujukan yang mungkin membantu anda dan saya akan memberikan beberapa pautan kepada anda. Satu lagi benang dalam stackoverflow

Anda juga boleh menggunakan kod JS berikut:

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

Penafian: Jawapan/coretan kod ini bukan milik saya. Saya mendapatnya daripada Maurice melchers https://codepen.io/mephysto/pen/ZYVKRY