한 번에 여러 프레임의 부트스트랩 회전각
이것이 제가 부트스트랩 3 회전목마로 달성하고자 하는 효과입니다.
한 번에 하나의 프레임만 표시하는 대신 N개의 프레임을 나란히 표시합니다.그런 다음 슬라이드를 슬라이드할 때(또는 자동 슬라이드할 때) 슬라이드 그룹이 이동합니다.
부트스트랩 3의 회전목마로 이것을 할 수 있습니까?더 이상 jQuery 플러그인을 찾지 않아도 되기를 바랍니다.
부트스트랩 5(2021년 업데이트)
회전목마는 부트스트랩 5에서 대부분 동일하지만, 개념은left그리고.right부트스트랩이 이제 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로 복제합니다.carousel-item 브디....
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);
}
부트스트랩 4 알파.6 데모
부트스트랩 4.0.0(표시 4, 한 번에 1개씩 진행)
부트스트랩 4.1.0(3번 표시, 한 번에 1번씩 진행)
부트스트랩 4.1.0(4개 모두 한 번에 업그레이드)
부트스트랩 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>
예 - Bootstrap 4 Response (모바일에서 4, 1 슬라이드 표시)
예 - Bootstrap 4 Response (모바일에서 5, 1 슬라이드 표시)
부트스트랩 3
다음은 Bootply: http://bootply.com/89193 의 3.x 예입니다.
활성 항목에 전체 이미지 행을 넣어야 합니다.다음은 더 작은 화면 너비로 이미지를 쌓지 않는 다른 버전입니다. http://bootply.com/92514
EDIT 한 번에 하나의 슬라이드를 진행하는 대안적 접근 방식:
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개의 부트스트랩 슬라이더를 만들 수 있습니까?
부트스트랩 4 멀티 캐러셀은 3개가 아닌 4개의 이미지를 보여줍니다.
위의 모든 해결책은 구식이고 버그 투성이입니다.시도조차도 하지 마세요.다른 입술을 사용합니다.제가 찾은 최고의 것 - http://sachinchoolur.github.io/lightslider 은 부트스트랩과 잘 어울리고, 정크 html을 추가하지 않으며, 확장성이 뛰어나고, 응답성이 뛰어나고, 모바일 친화적입니다.
$('.multi-item-carousel').lightSlider({
item: 4,
pager: false,
autoWidth: false,
slideMargin: 0
});
부트스트랩 3의 회전목마로 이것을 할 수 있습니까?나는 내가 다른 jQuery 플러그인을 더 이상 찾지 않아도 되기를 바랍니다.
2013-12-08년 현재 답변은 아니오입니다.당신이 찾고 있는 효과는 부트스트랩 3의 일반 회전 플러그인을 사용할 수 없습니다.하지만 여기 당신이 원하는 것을 정확히 수행하는 것처럼 보이는 간단한 jQuery 플러그인이 있습니다. http://sorgalla.com/jcarousel/
이것은 작동하는 트위터 부트스트랩 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; }
당신은 이 Jsfidle에서 그것이 작동하는 것을 볼 수 있습니다.
제가 이 답변을 추가한 이유는 다른 답변들이 완전히 작동하지 않기 때문입니다.저는 그 안에서 2개의 버그를 발견했는데, 그 중 하나는 왼쪽 화살표가 이상한 효과를 냈다는 것이고, 다른 하나는 어떤 상황에서는 텍스트가 굵어지는 것에 대한 것이었습니다. 스위치는 전환 효과 동안 아래 항목이 보이지 않도록 배경색을 설정하여 해결할 수 있습니다.
업데이트 2019-03-06 -- 부트스트랩 v4.3.1
에는 새운부트버추것같다습니가된로전이트랩스가 된 것 같습니다.margin-right: -100%따라서 여기서 가장 많이 업데이트된 답변에 제시된 응답 솔루션에서 각 항목에 대해 이 속성을 재설정해야 합니다. 예:
.carousel-inner .carousel-item {
margin-right: inherit;
}
LESS의 v4.3.1이 설치된 작업 코드입니다.
이것이 저에게 효과가 있었습니다.반응형 회전목마를 만드는 매우 간단한 jQuery와 CSS는 같은 페이지에서 회전목마와 독립적으로 작동합니다.고도로 사용자 지정이 가능하지만 기본적으로 인라인 블록 요소가 다수 포함된 화이트 스페이스의 디브 랩을 사용하여 처음에 뒤로 이동하거나 앞으로 이동할 마지막 디브를 끝까지 이동합니다.합니다.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>기본적으로 부트스트랩 3.4 Carousel 및 부트스트랩 4.5 Carousel Javascript 구성 요소 기능만으로 이를 달성하는 것은 지나치게 복잡하고 번거롭습니다.
좋아요, 그럼 당신은 아직 다른 jQuery 플러그인을 원하지 않습니다...난 그걸 이해해.
이미 프로젝트에서 jQuery를 사용해야 한다면 강력한 옵션이 많은 괜찮은 jQuery 회전식 플러그인을 사용하는 것이 좋을 것 같습니다.
slick.js - 당신이 필요로 하는 마지막 회전목마 - 켄 휠러
_ _ _ _
___| (_) ___| | __ (_)___
/ __| | |/ __| |/ / | / __|
\__ \ | | (__| < _ | \__ \
|___/_|_|\___|_|\_(_)/ |___/
|__/
이것은 정말로 당신이 필요로 하는 마지막 jQuery 회전 플러그인입니다.
- slick-carousel/1.9.0/slick.min.css - 1,369바이트(디스크에 4KB)
- slick-carousel/1.9.0/slick.min.js - 43,881바이트(디스크에서 45KB)
당신이 직면할 수 있는 몇 가지 시나리오는...
- 불행히도 만약 당신이 단지 분산 부트스트랩 3 또는 4를 당기고 있다면.
js그리고.cssCDN 또는 어디에서나 미니화된 파일은 웹 사이트 네트워크 요청에 추가된 또 다른 부피가 큰 jQuery 플러그인입니다. - NPM, Gulp, Bower 또는 부트스트랩을 제외할 수 있는 모든 것을 사용하는 경우
carousel.js그리고.carousel.scss최종 컴파일된 크기를 줄이기 위한 공급업체css그리고.js파일. 사용되지 않는 모든 부트스트랩 제외js그리고.scss공급업체는 최종 컴파일된 출력 파일을 줄이는 데 도움을 줄 것입니다.
slick.js를 사용하여 보너스를 추가했습니다...
- 터치/스위프를 통해 장치에서 회전식 스크롤(바탕 화면에서도 끌 수 있음)
- 각 반응 중단점에 대한 회전근개 옵션 정의
- 세트
mobileFirst: true또는false응답성이 높은 중단점 지시를 처리합니다. - 표시하거나 스크롤할 슬라이드(열) 수 설정(각 중단점에 대해 정의)
- 수직 및 수평 회전목마
.on만사형통- 다양한 옵션
부트스트랩 3개의 멀티 칼럼 슬릭 회전목마 예제
아래 코드펜 링크를 참조하여 예제를 테스트하십시오.
- codepen.io/joshmoto/pen/GRNEBXo -
scss부트스트랩 3스타일 화살표 및 점을 사용한 예제 - codepen.io/joshmoto/pen/RwogBJP - 간단한 예제 아래의 동일한 코드...
// bootstrap 3 breakpoints
const breakpoint = {
// extra small screen / phone
xs: 480,
// small screen / tablet
sm: 768,
// medium screen / desktop
md: 992,
// large screen / large desktop
lg: 1200
};
// bootstrap 3 responsive multi column slick carousel
$('#slick').slick({
autoplay: true,
autoplaySpeed: 2000,
draggable: true,
pauseOnHover: false,
infinite: true,
dots: false,
arrows: false,
speed: 1000,
mobileFirst: true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [{
breakpoint: breakpoint.xs,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: breakpoint.sm,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: breakpoint.md,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: breakpoint.lg,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
}
]
});/* .slick-list emulates .row */
#slick .slick-list {
margin-left: -15px;
margin-right: -15px;
}
/* .slick-slide emulates .col- */
#slick .slick-slide {
padding-right: 15px;
padding-left: 15px;
}
#slick .slick-slide:focus {
outline: none;
}<!-- jquery 3.3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bootstrap 3.4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- bootstrap 3 responsive multi column slick carousel example -->
<header>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header" style="float:left!important;">
<a class="navbar-brand" href="#">Slick in Bootstrap 3</a>
</div>
<div class="navbar-text pull-right" style="margin:15px!important;">
<a class="navbar-link" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
</div>
</nav>
</header>
<main>
<div class="container">
<div id="slick">
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="panel panel-default">
<img src="https://via.placeholder.com/1600x900" class="img-responsive" />
<div class="panel-body">
<h3 style="margin-top:0;">Article title</h3>
<p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
</div>
</div>
</main>부트스트랩 4개의 멀티 칼럼 슬릭 회전목마 예제
응답 테스트 예제를 보려면 아래 코드펜 링크를 참조하십시오.
- codepen.io/joshmoto/pen/XWNgYYR -
scss부트스트랩 4 스타일 화살표 및 점을 사용한 예제 - codepen.io/joshmoto/pen/MWboBVQ - 간단한 예제 아래의 동일한 코드...
// bootstrap 4 breakpoints
const breakpoint = {
// small screen / phone
sm: 576,
// medium screen / tablet
md: 768,
// large screen / desktop
lg: 992,
// extra large screen / wide desktop
xl: 1200
};
// bootstrap 4 responsive multi column slick carousel
$('#slick').slick({
autoplay: true,
autoplaySpeed: 2000,
draggable: true,
pauseOnHover: false,
infinite: true,
dots: false,
arrows: false,
speed: 1000,
mobileFirst: true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [{
breakpoint: breakpoint.sm,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: breakpoint.md,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: breakpoint.lg,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: breakpoint.xl,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
}
]
});/* .slick-list emulates .row */
#slick .slick-list {
margin-left: -15px;
margin-right: -15px;
}
/* .slick-slide emulates .col- */
#slick .slick-slide {
padding-right: 15px;
padding-left: 15px;
}
#slick .slick-slide:focus {
outline: none;
}<!-- jquery 3.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- bootstrap 4.5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- bootstrap 4 responsive multi column slick carousel example -->
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand mr-auto" href="#">Slick in Bootstrap 4</a>
<a class="nav-link d-none d-sm-inline" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
</nav>
</header>
<main class="py-4">
<div class="container">
<div id="slick">
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
<div class="slide">
<div class="card">
<img src="https://via.placeholder.com/1600x900" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Article title</h5>
<p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
<button class="btn btn-primary">View article</button>
</div>
</div>
</div>
</div>
</div>
</main>가장 인기 있는 답은 맞지만 코드가 쓸데없이 복잡하다고 생각합니다.동일한 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>
업데이트 2022 - 여러 항목이 포함된 부트스트랩 5 회전목마
부트스트랩 5 CSS 사용자 지정을 통해 이 작업을 완벽하게 관리할 수 있습니다.
이것은 환상적인 웹 개발자 부트스트랩 5 회전목마 다품종 1 증가의 환상적인 튜토리얼입니다.
중간 실시간 결과가 변경된 후 변경된 잘 수행된 튜토리얼
네 번째 카드의 슬라이스 크기를 늘리고 싶다면(사용자에게 다음 카드가 있다는 더 날카로운 힌트를 주기 위해 이를 제안합니다) 33.3333%에서 예를 들어 30%로 줄이기만 하면 됩니다.
@media (min-width: 768px) {
.carousel-inner {
display: flex;
}
.carousel-item {
margin-right: 0;
flex: 0 0 33.333333%;
display: block;
}
}
저도 같은 문제가 있었고 여기에 설명된 해결책이 잘 작동했습니다.그러나 창 크기(및 레이아웃) 변경을 지원하고 싶었습니다.결과는 모든 계산을 해결하는 작은 라이브러리입니다.여기를 확인해 보세요: 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창 크기 변경에 대응하는 시간 제한을 제어하기 위한 설정입니다.
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>
저는 당신의 질문과 답변을 보았고, 새로운 반응성과 유연성을 갖춘 다중 아이템 Gist를 만들었습니다.여기에서 확인할 수 있습니다.
https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e
속성이 "carousel-indicators" 값이고 data-slide-to가 0~6 또는 0~9와 같은 순차적 값을 갖는 여러 선형 태그를 클래스로 추가할 수 있습니다.
값이 "항목"인 클래스로 속성을 가진 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>
위 링크에 대한 참조 i는 부트스트랩 3(v3.3.7)을 위해 한 번에 하나씩 슬라이드하는 쇼 4라는 새로운 것을 추가했습니다.
코드플라이:- 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
'programing' 카테고리의 다른 글
| Python 코드를 PEP8 호환으로 변환하는 도구 (0) | 2023.08.02 |
|---|---|
| Div 너비 100% - 고정 픽셀 수 (0) | 2023.08.02 |
| 도커: apt-utils 설치 문제 발생 (0) | 2023.07.28 |
| 문자로 분할하지 않고 목록에 문자열 삽입 (0) | 2023.07.28 |
| AJAX를 통해 BLOB를 검색할 때 오류 메시지 처리 (0) | 2023.07.28 |