次の画面に示すように、Bootstrap5 を使用してスライダー/カルーセル製品を作成しようとしています:
ここに貼り付けます。これが私の現在のコードです:
リーリー リーリー
しかし、現時点ではこれは悪いようです:
1 つの項目しか表示されていませんが、このように 3 つ半を表示する必要があります。写真の価格と商品タイトルの下にも追加してみましたが、画像には必ず
P粉0667251482024-03-27 09:05:03
これを検索している場合は、this Codepen と this Codeply を見つけることができます。
2 つを組み合わせると、実際の例 (Codepen) が得られます。
JS は各 .carousel-item のコンテンツをクローンするため、各 .carousel-item はその (5) 兄弟のコンテンツを保持します。 CSS は Transform を変更して、スライダーがそれに応じて移動するようにします。