モバイル上のカスタム Bootstrap 5 カルーセル (複数の項目、ただし 1 行ではない)

Question

モバイル デバイスでカルーセル レイアウトをカスタマイズしようとすると問題が発生します。 モバイルでカルーセルの項目を 1 つだけではなくすべて表示したいのですが、いくつかの CSS と JS、具体的には display float< /code> または を使用して試した後、 max-witdh これは不可能だと思い始めたか、どこを見るべきかわかりません/間違った場所/属性を調べます。 私が何を達成しようとしているのかがわかるように、2 つの画像を含めました。

達成したいこと:

私が持っているもの:

サンプルの HTML コードは非常に基本的なものです。これはデザインのみを目的としているため、CSS は含めていません。

<div id="solutions-carousel" class="カルーセル スライド d-block d-md-none">
<div class="カルーセルインナー">
<div class="カルーセル項目アクティブ">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">テキスト</a>
</div>
<div class="カルーセルアイテム">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">テキスト</a>
</div>
<div class="カルーセル項目アクティブ">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">テキスト</a>
</div>
<div class="カルーセル項目アクティブ">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">テキスト</a>
</div>
<div class="カルーセル項目アクティブ">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">テキスト</a>
</div>
<div class="カルーセルインジケーター">
  <ボタンの種類=「ボタン」 data-bs-target="#solutions-carousel" data-bs-slide-to="0"クラス= "アクティブ" aria-current="true" aria-label="スライド 1"></button>
  <ボタンの種類=「ボタン」 data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="スライド 2"></button>
  <ボタンの種類=「ボタン」 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>

何か素敵な方法はありますか？ドライカップ（そして、砂糖を表す英語の意味を表します）。

Answer 1

同様の質問やケースが以前に別のスレッドで回答されていると思います。参考になりそうな参考文献をいくつか見つけたので、リンクをいくつか紹介します。 スタックオーバーフローの別のスレッド

次の JS コードを使用することもできます:

リーリー

免責事項: これらの回答/コード スニペットは私のものではありません。 Maurice melchers の https://codepen.io/mephysto/pen/ZYVKRY から入手しました。