2019 업데이트 ...
부트 스트랩 4
캐 러셀은 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 Demo
Bootstrap 4.0.0 (4 개 표시, 한 번에 1 개 진행)
Bootstrap 4.1.0 (3 개 표시, 한 번에 1 개 진행)
Bootstrap 4.1.0 (4 개 모두 한 번에 진행)
Bootstrap 4.3.1 반응 형 (여러 개 표시, 고급 1) new
카드가있는 부트 스트랩 4.3.1 캐 러셀new
또 다른 옵션은 작은 화면 에서 1 개의 슬라이드 만 표시하고 앞으로 진행 하는 반응 형 캐 러셀 이지만 여러 슬라이드는 큰 화면으로 표시 됩니다. 이전 예제와 같이 슬라이드를 복제하는 대신 CSS를 조정하고 jQuery를 사용하여 추가 슬라이드를 이동하여 연속 순환 (둘러싸 기)을 허용합니다.
이 코드를 복사하여 붙여 넣지 마십시오. 먼저 작동 방식을 이해하십시오.
부트 스트랩 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>
예- 반응 형 부트 스트랩 4 (모바일에서 4, 1 슬라이드 표시)
예- 반응 형 부트 스트랩 4 (모바일에서 5, 1 슬라이드 표시)
부트 스트랩 3
다음은 Bootply의 3.x 예제입니다. http://bootply.com/89193
항목에 전체 이미지 행을 활성화해야합니다. 다음은 더 작은 화면 너비로 이미지를 쌓지 않는 또 다른 버전입니다. http://bootply.com/92514
한 번에 한 슬라이드 씩 진행하는 대체 방법 수정 :
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 개씩 표시되지만 한 번 에 하나씩 만 슬라이드 합니다.
Bootstrap 3.x 데모
이 코드를 복사하여 붙여 넣지 마십시오. 먼저 작동 방식을 이해하십시오. 이 답변은 학습 에 도움이 됩니다.
이 수정 된 부트 스트랩 4 캐 러셀을 두 배로 늘리면 절반 만 올바르게 작동합니다 (스크롤 루프 작동이 중지됨).
CSS와 jquery를 혼합하지 않고 단일 페이지에서 2 개의 부트 스트랩 슬라이더를 만드는 방법은 무엇입니까?
Bootstrap 4 Multi Carousel에 3 개 대신 4 개의 이미지 표시
