반응형
한 번에 여러 프레임을 부트 스트랩 캐 러셀
이것이 제가 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 개씩 표시되지만 한 번 에 하나씩 만 슬라이드 합니다.
이 코드를 복사하여 붙여 넣지 마십시오. 먼저 작동 방식을 이해하십시오. 이 답변은 학습 에 도움이 됩니다.
이 수정 된 부트 스트랩 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&text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&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&text=1" />
<img class="carosel-item" src="http://placehold.it/500/CCCCCC&text=2" />
<img class="carosel-item" src="http://placehold.it/500/eeeeee&text=3" />
<img class="carosel-item" src="http://placehold.it/500/f4f4f4&text=4" />
<img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&text=5" />
<img class="carosel-item" src="http://placehold.it/500/f477f4/fff&text=6" />
</div>
<a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>가장 대중적인 대답은 맞지만 코드가 쓸데없이 복잡하다고 생각합니다. 동일한 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);
}
});
});
이것을 시도하십시오 ..... 내에서 작동합니다 .... 코드 :
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="span4" style="padding-left: 18px;">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
</div>
</div>
<div class="item">
<div class="span4" style="padding-left: 18px;">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
<img src="http://placehold.it/290x180" class="img-thumbnail">
</div>
</div>
</div>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child"));
$(".item.active:last-child").insertBefore($(".item:first-child"));
}); .item.active,
.item.active + .item,
.item.active + .item + .item {
width: 33.3%;
display: block;
float:left;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/300x200?text=1">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=2">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=3">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=4">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=5">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=6">
</div>
<div class="item">
<img data-src="holder.js/300x200?text=7">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>
업데이트 2019-03-06-Bootstrap v4.3.1
새로운 Bootstrap 버전 margin-right: -100%은 각 항목 에을 추가하는 것 같습니다. 따라서 여기에서 가장 많이 찬성 된 답변에 제공된 반응 형 솔루션 에서이 속성을 재설정해야합니다. 예 :
.carousel-inner .carousel-item {
margin-right: inherit;
}
LESS에서 v4.3.1로 작동하는 코드 펜 .
나는 동일한 문제가 있었고 여기에 설명 된 솔루션이 잘 작동했습니다. 하지만 창 크기 (및 레이아웃) 변경을 지원하고 싶었습니다. 결과는 모든 계산을 해결하는 작은 라이브러리입니다. 여기에서 확인하세요 : https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger
스크립트 작업을하려면 새 추가해야 <div>클래스와 래퍼를 .item-content당신에 직접 .item <div>. 예:
<div class="carousel slide multiple" id="very-cool-carousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="item-content">
First page
</div>
</div>
<div class="item active">
<div class="item-content">
Second page
</div>
</div>
</div>
</div>
이 라이브러리의 사용법 :
socialbitBootstrapCarouselPageMerger.run('div.carousel');
설정을 변경하려면 :
socialbitBootstrapCarouselPageMerger.settings.spaceCalculationFactor = 0.82;
예:
보시다시피 창 크기를 조정할 때 더 많은 컨트롤을 표시하도록 캐 러셀이 업데이트됩니다. watchWindowSizeTimeout창 크기 변경에 대한 반응 시간 제한을 제어 하려면 설정을 확인하십시오 .
<!--css code-->
.carousel-showsixmoveone .carousel-control {
width: 4%;
background-image: none;
}
.carousel-showsixmoveone .carousel-control.left {
margin-left: 15px;
}
.carousel-showsixmoveone .carousel-control.right {
margin-right: 15px;
}
.carousel-showsixmoveone .cloneditem-1,
.carousel-showsixmoveone .cloneditem-2,
.carousel-showsixmoveone .cloneditem-3,
.carousel-showsixmoveone .cloneditem-4,
.carousel-showsixmoveone .cloneditem-5 {
display: none;
}
@media all and (min-width: 768px) {
.carousel-showsixmoveone .carousel-inner > .active.left,
.carousel-showsixmoveone .carousel-inner > .prev {
left: -33.333%;
}
.carousel-showsixmoveone .carousel-inner > .active.right,
.carousel-showsixmoveone .carousel-inner > .next {
left: 33.333%;
}
.carousel-showsixmoveone .carousel-inner > .left,
.carousel-showsixmoveone .carousel-inner > .prev.right,
.carousel-showsixmoveone .carousel-inner > .active {
left: 0;
}
.carousel-showsixmoveone .carousel-inner .cloneditem-1,
.carousel-showsixmoveone .carousel-inner .cloneditem-2 {
display: block;
}
}
@media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showsixmoveone .carousel-inner > .item.active.right,
.carousel-showsixmoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(33.333%, 0, 0);
transform: translate3d(33.333%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.active.left,
.carousel-showsixmoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-33.333%, 0, 0);
transform: translate3d(-33.333%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.left,
.carousel-showsixmoveone .carousel-inner > .item.prev.right,
.carousel-showsixmoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width: 992px) {
.carousel-showsixmoveone .carousel-inner > .active.left,
.carousel-showsixmoveone .carousel-inner > .prev {
left: -16.666%;
}
.carousel-showsixmoveone .carousel-inner > .active.right,
.carousel-showsixmoveone .carousel-inner > .next {
left: 16.666%;
}
.carousel-showsixmoveone .carousel-inner > .left,
.carousel-showsixmoveone .carousel-inner > .prev.right,
.carousel-showsixmoveone .carousel-inner > .active {
left: 0;
}
.carousel-showsixmoveone .carousel-inner .cloneditem-3,
.carousel-showsixmoveone .carousel-inner .cloneditem-4,
.carousel-showsixmoveone .carousel-inner .cloneditem-5 {
display: block;
}
}
@media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showsixmoveone .carousel-inner > .item.active.right,
.carousel-showsixmoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(16.666%, 0, 0);
transform: translate3d(16.666%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.active.left,
.carousel-showsixmoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-16.666%, 0, 0);
transform: translate3d(-16.666%, 0, 0);
left: 0;
}
.carousel-showsixmoveone .carousel-inner > .item.left,
.carousel-showsixmoveone .carousel-inner > .item.prev.right,
.carousel-showsixmoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
<!-- begin snippet: js hide: false console: true --><!--html-->
<div class="row ">
<div class="col-md-12">
<div class="carousel carousel-showsixmoveone slide" id="chocolatelist" data-interval="30000">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2">
<a href="#">
<img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
<a href="#">
<img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
<a href="#">
<img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
<a href="#">
<img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive">
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
<a href="#">
<img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive">
</a>
</div>
</div>
</div>
<a class="left carousel-control" href="#chocolatelist" data-slide="prev"><i class="glyphicon glyphicon-chevron-left "></i></a>
<a class="right carousel-control" href="#chocolatelist" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>이 코드를 붙여 넣으면 실마리를 얻을 수 있습니다. 캐 러셀 슬라이드 이미지 링크
Try this code
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="img/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>
Easy Polo Black Edition
</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a>
</div>
귀하의 질문과 답변을 확인하고 새로운 반응 형 및 유연한 멀티 아이템 회전식 요점을 만들었습니다. 여기에서 볼 수 있습니다.
https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e
"carousel-indicators"값이있는 클래스로 속성이있는 ol 태그에 여러 li을 추가 할 수 있으며 data-slide-to는 0에서 6 또는 0에서 9와 같은 순차 값을 갖습니다.
속성 값이 "item"인 클래스로 속성이있는 div를 복사하여 붙여 넣기 만하면됩니다.
이것은 나를 위해 작동합니다.
<div data-ride="carousel" class="carousel slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel" class=""></li>
<li data-slide-to="2" data-target="#myCarousel" class="active"></li>
<li data-slide-to="3" data-target="#myCarousel" class=""></li>
<li data-slide-to="4" data-target="#myCarousel" class=""></li>
<li data-slide-to="5" data-target="#myCarousel" class=""></li>
<li data-slide-to="6" data-target="#myCarousel" class=""></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/carousel/11.jpg"
class="first-slide">
</div>
<div class="item">
<img alt="Second slide" src="images/carousel/22.jpg"
class="second-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/33.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/44.jpeg"
class="fourth-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/55.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/66.jpg"
class="third-slide">
</div>
<div class="item">
<img alt="Third slide" src="images/carousel/77.jpg"
class="third-slide">
</div>
</div>
<a data-slide="prev" role="button" href="#myCarousel"
class="left carousel-control"> <span aria-hidden="true"
class="glyphicon glyphicon-chevron-left"></span> <span
class="sr-only">Previous</span>
</a> <a data-slide="next" role="button" href="#myCarousel"
class="right carousel-control"> <span aria-hidden="true"
class="glyphicon glyphicon-chevron-right"></span> <span
class="sr-only">Next</span>
</a>
</div>
위의 링크를 참조 하여 한 번에 show 4 라는 새로운 것을 추가 하고 부트 스트랩 3 (v3.3.7)을 위해 한 번에 하나씩 슬라이드합니다.
CODEPLY : - https://www.codeply.com/go/eWUbGlspqU
라이브 스 니펫
(function(){
$('#carousel123').carousel({ interval: 2000 });
}());
(function(){
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<4;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}());body {
margin-top: 50px;
}
.carousel-showmanymoveone .carousel-control {
width: 4%;
background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {
margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
display: none;
}
@media all and (min-width: 768px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {
display: block;
}
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width: 992px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -25%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 25%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-2,
.carousel-showmanymoveone .carousel-inner .cloneditem-3 {
display: block;
}
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>참고 URL : https://stackoverflow.com/questions/20007610/bootstrap-carousel-multiple-frames-at-once
반응형
'developer tip' 카테고리의 다른 글
| 메모장 ++ htmltidy-libtidy.dll을 찾을 수 없음 (0) | 2020.08.23 |
|---|---|
| 앵커 (a) 태그에서 로컬 href 값 가져 오기 (0) | 2020.08.23 |
| 팬더에서 발생 횟수를 계산하는 가장 효율적인 방법은 무엇입니까? (0) | 2020.08.23 |
| C # 분할 문자열이지만 분할 문자 / 구분자 유지 (0) | 2020.08.23 |
| IIS7 설정 파일 위치 (0) | 2020.08.23 |