在行動裝置上自訂 Bootstrap 5 輪播（多個項目，但不在一行）

Question

<p>我在嘗試自訂行動裝置上的輪播佈局時遇到問題。 我希望它在行動裝置上顯示輪播的每一項，而不是只顯示一項，但在嘗試使用一些CSS 和JS 之後，尤其是使用<code>display</code> <code>float< /code> 或<code>max-witdh</code> 我剛開始認為這是不可能的，或者我不知道在哪裡查看/查看錯誤的位置/屬性。 我加入了兩張圖片，這樣你們就可以看到我想要實現的目標。 </p> <p>我想要實現的目標： </p> <p>我有什麼： </p> <p>範例 html 程式碼是非常基本的程式碼，我不包括 CSS，因為這只是出於設計目的。 </p> <pre class="brush:php;toolbar:false;"><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" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-indicators"> <按鈕類型=“按鈕” data-bs-target=“#solutions-carousel” data-bs-slide-to＝“0”類別=“活躍” aria-current=“真” aria-label="幻燈片 1"</button> <按鈕類型=“按鈕” data-bs-target=“#solutions-carousel” data-bs-slide-to＝“1” aria-label=“幻燈片 2”> <按鈕類型=“按鈕” data-bs-target=“#solutions-carousel” data-bs-slide-to＝“2” aria-label="幻燈片 3"</button> <按鈕類型=“按鈕” data-bs-target=“#solutions-carousel” data-bs-slide-to＝“3” aria-label="幻燈片 3"</button> <按鈕類型=“按鈕” data-bs-target=“#solutions-carousel” data-bs-slide-to＝“4” aria-label="幻燈片 3"</button> </div></pre> <p>有想法嗎？乾杯意（書面上用英文表示抱歉）。</p>

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 得到它