English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 캐러셀（Carousel）플러그인

Bootstrap 캐러셀(Carousel) 플러그인은 사이트에 슬라이더를 추가하는 유연한 반응형 방법입니다. 이 외에도 내용도 매우 유연하며, 이미지, 내嵌 프레임, 비디오 또는 다른 어떤 유형의 내용도 추가할 수 있습니다。

플러그인의 기능을 단독으로 참조하고 싶다면， carousel.js。또는， Bootstrap 플러그인 개요 챕터에서 언급된 것처럼， bootstrap.js 또는 압축된 bootstrap.min.js。

온라인 예제

다음은 단순한 슬라이드입니다. Bootstrap 캐러셀(Carousel) 플러그인을 사용하여 반복 재생 요소의 일반 컴포넌트를 표시했습니다. 캐러셀을 구현하려면 해당 태그를 추가하는 것만으로도 충분합니다. data 속성을 사용하지 않고 단순한 클래스 기반 개발만으로도 됩니다。

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　간단한 캐러셀(Carousel) 플러그인</title>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!--　롤링(Carousel) 지시자　-->
	<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>
	</ol>　　　
	<!--　롤링(Carousel) 항목　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/run/images/slide1.png"　alt="First　slide">
		</div>
		<div　class="item">
			<img　src="/run/images/slide2.png"　alt="Second　slide">
		</div>
		<div　class="item">
			<img　src="/run/images/slide3.png"　alt="Third　slide">
		</div>
	</div>
	<!--　롤링(Carousel) 탐색　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
		<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true"></span>
		<span　class="sr-only">이전</span>
	</a>
	<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">다음</span>
	</a>
</div>　
</body>
</html>
테스트 보고서 ‹/›

결과는 다음과 같습니다:

선택적인 제목

선택적인 제목을 통해 .item 내부의 .carousel-caption 요소를 통해 슬라이드에 제목을 추가합니다. 여기에 어떤 선택적인 HTML을 두고도 됩니다. 그것은 자동으로 정렬되고 포맷됩니다. 다음 예제가 이를 보여줍니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　캐러셀(Carousel) 플러그인의 제목</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!--　롤링(Carousel) 지시자　-->
	<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>
	</ol>　　　
	<!--　롤링(Carousel) 항목　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/run/images/slide1.png"　alt="First　slide">
			<div　class="carousel-caption">제목　1</div>
		</div>
		<div　class="item">
			<img　src="/run/images/slide2.png"　alt="Second　slide">
			<div　class="carousel-caption">제목　2</div>
		</div>
		<div　class="item">
			<img　src="/run/images/slide3.png"　alt="Third　slide">
			<div　class="carousel-caption">제목　3</div>
		</div>
	</div>
	<!--　롤링(Carousel) 탐색　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
	　　　　<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true"></span>
	　　　　<span　class="sr-only">이전</span>
	</a>
	<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">다음</span>
	</a>
</div>　
</body>
</html>
테스트 보고서 ‹/›

결과는 다음과 같습니다:


사용법

  • data 속성을 통해：data 속성을 사용하여 쉽게 캐러셀(Carousel) 위치를 제어할 수 있습니다。

    • 속성을 받아들입니다 data-slide 키워드 prev 또는 next을 사용하여 슬라이드가 현재 위치에 비해 위치를 변경합니다.

    • 사용하여 data-slide-to 원시 슬라이딩 인덱스를 전달하여data-slide-to="2" 스ライ더를 특정 인덱스로 이동시킵니다. 인덱스는 0부터 시작합니다.

    • data-ride="carousel" 속성은 페이지 로드 시 롤러가 애니메이션을 시작하도록 표시합니다。

  • JavaScript를 통해：롤러(Carousel)는 다음과 같이 JavaScript를 통해 수동으로 호출할 수 있습니다：

    $('.carousel').carousel()

옵션

某些选项是通过 data 속성이나 JavaScript를 통해 전달됩니다. 아래 표는 이러한 옵션들을 나열합니다：

옵션 이름타입/기본 값Data 속성 이름설명
intervalnumber
기본 값:5000		data-interval각 아이템 사이에 지연 시간을 자동으로 반복합니다. false이면 롤러는 자동으로 반복하지 않습니다。
pausestring
기본 값: "hover"		data-pause마우스가 들어갈 때 롤러 반복을 멈추고, 마우스가 나갈 때 롤러를 재개합니다。
wrapboolean
기본 값: true		data-wrap롤러가 반복적으로 반복하는지 여부

메서드

롤러(Carousel) 플러그인에 있는 유용한 메서드들:

메서드설명예제
.carousel(options)롤러를 선택할 수 있는 options 객체로 초기화하고 반복을 시작합니다。
$('#identifier').carousel({
　　　　interval:　2000
})
.carousel('cycle')왼쪽에서 오른쪽으로 반복 롤러합니다。
$('#identifier').carousel('cycle')
.carousel('pause')롤러 반복을 멈축합니다。
$('#identifier').carousel('pause')
.carousel(number)특정 프레임(0부터 시작)으로 반복 롤러합니다。
$('#identifier').carousel(number)
.carousel('prev')이전 아이템으로 반복 롤러합니다。
$('#identifier').carousel('prev')
.carousel('next')다음 아이템으로 반복 롤러합니다。
$('#identifier').carousel('next')

온라인 예제

아래의 예제는 메서드의 사용법을 설명합니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　롤러(Carousel) 플러그인 메서드</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!--　롤링(Carousel) 지시자　-->
	<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>
	</ol>　　　
	<!--　롤링(Carousel) 항목　-->
	<div　class="carousel-inner">
		<div　class="item　active">
		<img　src="/run/images/slide1.png"　alt="First　slide">
		</div>
		<div　class="item">
		<img　src="/run/images/slide2.png"　alt="Second　slide">
		</div>
		<div　class="item">
		<img　src="/run/images/slide3.png"　alt="Third　slide">
		</div>
	</div>
	<!--　롤링(Carousel) 탐색　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
	　　　　<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true"></span>
	　　　　<span　class="sr-only">이전</span>
	</a>
	<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">다음</span>
	</a>
</div>
<!--　제어 버튼　-->
<div style="text-align:center;">
	<input type="button" class="btn start-slide"　value="Start">
	
	
	
	테스트 보고서 ‹/›

결과는 다음과 같습니다:


이벤트

아래 표는 캐러셀(Carousel) 플러그인에서 사용할 이벤트를 나열합니다. 이 이벤트는 함수에서 훅으로 사용할 수 있습니다.

이벤트설명예제
slide.bs.carouselslide 예제 메서드를 호출할 때 즉시 이 이벤트가 트리거됩니다.
$('#identifier').on('slide.bs.carousel', function () {
　　　　//　일정한 행동을 수행합니다...
})
slid.bs.carousel스ライ드 캐러셀의 트랜지션 효과가 완료되면 이 이벤트가 트리거됩니다.
$('#identifier').on('slid.bs.carousel', function () {
　　　　//　일정한 행동을 수행합니다...
})

온라인 예제

아래의 예제는 이벤트 사용법을 보여줍니다：

온라인 예제

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　예제　-　롤링(Carousel) 플러그인 이벤트</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　id="myCarousel"　class="carousel　slide">
	<!--　롤링(Carousel) 지시자　-->
	<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>
	</ol>　　　
	<!--　롤링(Carousel) 항목　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/run/images/slide1.png"　alt="First　slide">
		</div>
		<div　class="item">
			<img　src="/run/images/slide2.png"　alt="Second　slide">
		</div>
		<div　class="item">
			<img　src="/run/images/slide3.png"　alt="Third　slide">
		</div>
	</div>
	<!--　롤링(Carousel) 탐색　-->
	<a　class="left　carousel-control"　href="#myCarousel"　role="button"　data-slide="prev">
	　　　　<span　class="glyphicon　glyphicon-chevron-left"　aria-hidden="true"></span>
	　　　　<span　class="sr-only">이전</span>
	</a>
	<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">다음</span>
	</a>
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("slide 예제 메서드 호출 시 즉시 이 이벤트가 발생합니다.");
		});
	});
</script>
</body>
</html>
테스트 보고서 ‹/›

결과는 다음과 같습니다:

Bootstrap HTML编码 규범Bootstrap 클램프 플러그인