これは私がBootstrap 3カルーセルで実現しようとしている効果です
一度に 1 つのフレームを表示するのではなく、N 個のフレームを並べてスライド表示します。その後、スライドすると (または自動スライドすると)、スライドのグループが同じようにシフトします。
これはできるだろうかBootstrap 3 のカルーセルではどうですか? また別の jQuery プラグインを探し回らなくて済むといいのですが...
ベストアンサー1
ブートストラップ5(2021年更新)
left
カルーセルはBootstrap 5でもほとんど同じですが、との概念は次right
のように変更されました。始めるそして終わりBootstrap は RTL をサポートするようになりました。そのため、左/右のクラスが変更されました。以下は、4 つのアイテム (25% 幅の列) のマルチアイテム CSS の例です...
@media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
jQuery は不要になったため、Vanilla JS を使用してスライドをcarousel-item
div に複製します。
let items = document.querySelectorAll('.carousel .carousel-item')
items.forEach((el) => {
// number of slides per carousel-item
const minPerSlide = 4
let next = el.nextElementSibling
for (var i=1; i<minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
ブートストラップ4(2019年更新)
カルーセルは 4.x で変更され、マルチスライド アニメーション トランジションは次のように上書きできます...
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%)
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
Bootstrap 4 Alpha.6 デモ
Bootstrap 4.0.0 (4 つ表示、1 つずつ進む)
Bootstrap 4.1.0 (3 つ表示、1 つずつ進む)
Bootstrap 4.1.0 (4つすべてを一度に進める)
Bootstrap 4.3.1 レスポンシブ (複数表示、1 進む)new
Bootstrap 4.3.1 カード付きカルーセルnew
もう一つの選択肢は応答性表示と進行のみを行うカルーセル小さい画面では1スライド、しかし、複数のスライドは大きな画面になります前の例のようにスライドを複製する代わりに、この例では CSS を調整し、jQuery を使用して追加のスライドを移動し、連続循環 (ラップアラウンド) を可能にします。
このコードをそのままコピーして貼り付けないでください。まず、どのように動作するかを理解してください。
Bootstrap 4 レスポンシブ (モバイルでは 3 枚、1 枚のスライドを表示)
@media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
<div class="container-fluid">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
例 -Bootstrap 4 レスポンシブ (モバイルでは 4、1 スライドを表示)
例 -Bootstrap 4 レスポンシブ (モバイルでは 5、1 スライドを表示)
ブートストラップ3
以下は Bootply の 3.x の例です。http://bootply.com/89193
アイテム内の画像の行全体をアクティブにする必要があります。以下は、画面幅が小さい場合に画像を積み重ねない別のバージョンです。http://bootply.com/92514
編集代替アプローチ一度に1枚ずつスライドを進める:
jQuery を使用して次の項目を複製します。
$('.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));
}
});
そしてそれに応じて CSS を配置します...
3.3.1以前
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
3.3.1以降
.carousel-inner .item.left.active {
transform: translateX(-33%);
}
.carousel-inner .item.right.active {
transform: translateX(33%);
}
.carousel-inner .item.next {
transform: translateX(33%)
}
.carousel-inner .item.prev {
transform: translateX(-33%)
}
.carousel-inner .item.right,
.carousel-inner .item.left {
transform: translateX(0);
}
この意志一度に 3 つ表示しますが、スライドは 1 つだけです一度に:
このコードをコピーして貼り付けないでください。まず、それがどのように機能するかを理解してください。この答えはここにあります学習を助ける。
この修正された Bootstrap 4 カルーセルを 2 倍にすると、半分しか正しく機能しません (スクロール ループが機能しなくなります)
CSS と jQuery を混在させずに 1 ページに 2 つの Bootstrap スライダーを作成する方法を教えてください。
Bootstrap 4 マルチカルーセルは 3 枚ではなく 4 枚の画像を表示します