이것이 제가 Bootstrap 3 캐 러셀로 달성하려는 효과입니다.

한 번에 한 프레임 만 표시하는 대신 N 프레임을 나란히 표시합니다. 그런 다음 슬라이드 할 때 (또는 자동 슬라이드 할 때) 슬라이드 그룹을 이동합니다.

부트 스트랩 3의 캐 러셀로 이것을 할 수 있습니까 ? 나는 아직 다른 jQuery 플러그인을 사냥하러 갈 필요가 없기를 바라고 있습니다.

답변

부트 스트랩 3의 캐 러셀로 이것을 할 수 있습니까? 나는 아직 다른 jQuery 플러그인을 사냥하러 갈 필요가 없기를 바라고 있습니다.

2013-12-08 현재 대답은 ‘아니요’입니다. 찾고있는 효과는 Bootstrap 3의 일반 캐 러셀 플러그인을 사용하여 불가능합니다. 그러나 여기에 원하는 것을 정확히 수행하는 것처럼 보이는 간단한 jQuery 플러그인이 있습니다. http://sorgalla.com/jcarousel/

답변

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 개의 이미지 표시

답변

위의 모든 솔루션은 해키하고 버그가 있습니다. 시도하지 마십시오. 다른 라이브러리를 사용하십시오. 내가 발견 한 가장 좋은 – http://sachinchoolur.github.io/lightslider가
정크 HTML을 추가하지 않습니다, 부트 스트랩과 함께 좋은 작품, 높은 구성, 반응 등 모바일 친화적 인 …

$('.multi-item-carousel').lightSlider({
    item: 4,
    pager: false,
    autoWidth: false,
    slideMargin: 0
});

답변

이것은 작동하는 트위터 부트 스트랩 3입니다.

다음은 자바 스크립트입니다 .

$('#myCarousel').carousel({
    interval: 10000
})

$('.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 :

.carousel-inner .active.left  { left: -33%;             }
.carousel-inner .active.right { left: 33%;              }
.carousel-inner .next         { left: 33%               }
.carousel-inner .prev         { left: -33%              }
.carousel-control.left        { background-image: none; }
.carousel-control.right       { background-image: none; }
.carousel-inner .item         { background: white;      }

이 Jsfiddle 에서 실제로 작동하는 것을 볼 수 있습니다.

다른 답변이 완전히 작동하지 않기 때문에이 답변을 추가 한 이유입니다. 2 개의 버그를 발견했는데 그중 하나는 왼쪽 화살표가 이상한 효과를 내고 다른 하나는 일부 상황에서 텍스트가 굵어진다는 것입니다. 마녀는 전환하는 동안 하단 항목이 보이지 않도록 배경색을 설정하여 해결할 수 있습니다. 효과.

답변

이것이 나를 위해 일한 것입니다. 반응 형 캐 러셀이 동일한 페이지의 캐 러셀과 독립적으로 작동하도록 만드는 매우 간단한 jQuery 및 CSS입니다. 고도로 커스터마이징이 가능하지만 기본적으로 공백이있는 div는 인라인 블록 요소를 포함하고 처음에 마지막 요소를 배치하여 뒤로 이동하거나 첫 번째 요소를 끝에 배치하여 앞으로 이동합니다. 감사합니다 insertAfter!

$('.carosel-control-right').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
});
$('.carosel-control-left').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
});

@media (max-width: 300px) {
  .carosel-item {
    width: 100%;
  }
}
@media (min-width: 300px) {
  .carosel-item {
    width: 50%;
  }
}
@media (min-width: 500px) {
  .carosel-item {
    width: 33.333%;
  }
}
@media (min-width: 768px) {
  .carosel-item {
    width: 25%;
  }
}
.carosel {
  position: relative;
  background-color: #000;
}
.carosel-inner {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
}
.carosel-item {
  display: inline-block;
}
.carosel-control {
  position: absolute;
  top: 50%;
  padding: 15px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
  display: inline-block;
}
.carosel-control-left {
  left: 15px;
}
.carosel-control-right {
  right: 15px;
}
.carosel-control:active,
.carosel-control:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carosel" id="carosel1">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
<div class="carosel" id="carosel2">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>

스 니펫 확장

답변

업데이트 2019-03-06-Bootstrap v4.3.1

새로운 Bootstrap 버전 margin-right: -100%은 각 항목 에을 추가하는 것 같습니다. 따라서 여기에서 가장 많이 찬성 된 답변에 제공된 반응 형 솔루션 에서이 속성을 재설정해야합니다. 예 :

.carousel-inner .carousel-item {
    margin-right: inherit;
}

LESS에서 v4.3.1로 작동하는 코드 펜 .

답변

가장 대중적인 대답은 맞지만 코드가 쓸데없이 복잡하다고 생각합니다. 동일한 CSS를 사용하면이 jquery 코드가 이해하기 더 쉽습니다.

$('#myCarousel').carousel({
  interval: 10000
})

$('.carousel .item').each(function() {
  var item = $(this);
  item.siblings().each(function(index) {
    if (index < 4) {
      $(this).children(':first-child').clone().appendTo(item);
    }
  });
});