在行動裝置上自訂 Bootstrap 5 輪播(多個項目,但不在一行)
P粉763662390
P粉763662390 2023-09-05 11:53:56
0
1
625
<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>
P粉763662390
P粉763662390

全部回覆(1)
P粉029057928

我認為類似的問題和案例之前已經在另一個線程中得到了答案。我找到了一些可能對您有幫助的參考資料,我會給您一些連結。 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 得到它

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板