BS3
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp
Carousel 소개
요소 순환 슬라이드쇼.
1.
캐러셀 플러그인은 아래 파일 중 아무거나 하나 추가하면 사용 가능.
개별: carousel.js 파일.
통합: bootstrap.js (또는, bootstrap.min.js) 파일.
2.
IE10 이상 주요 최신브라우저 지원. (∵ CSS3 (Transition 및 Animation) 사용)
Carousel 이미지만
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
예제보기
Carousel 이미지 + 텍스트
각각의 <div class="item"> 안에 <div class="carousel-caption">추가.
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
JS Carousel
Carousel 클래스
.carousel
캐러셀 생성.
.slide
한 항목에서 다음 항목으로 이동할 때 CSS 전환 및 애니메이션 효과 추가.
이 효과를 원하지 않으면 이 클래스를 제거.
.carousel-indicators
슬라이드 쇼에 대한 지표를 추가. 각 슬라이드 하단의 작은 점.
(회전 슬라이드에 슬라이드가 몇 개 있는지, 사용자가 현재 보고있는 슬라이드를 나타냄.)
.carousel-inner
슬라이드에 슬라이드를 추가.
.icon-next
유니 코드 아이콘 (오른쪽 화살표). 글리피콘 대신에 자주 사용.
.icon-prev
유니 코드 아이콘 (왼쪽 화살표). 글리피콘 대신에 자주 사용.
.item
각 슬라이드의 내용을 지정.
.left carousel-control
슬라이드쇼에 왼쪽 버튼을 추가하여 슬라이드 간 이동 가능하게 함.
.right carousel-control
슬라이드쇼에 오른쪽 버튼을 추가하여 슬라이드 간 이동 가능하게 함.
.carousel-caption
슬라이드쇼의 캡션 지정.
Carousel 방법1 - data-* 속성 이용
[핵심코드]
<!-- data-ride = "carousel"속성 : 캐러셀 메뉴를 활성화 시킴.-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- data-slide 및 data-slide-to 속성 : 이동할 슬라이드 지정 -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- data-slide 속성: prev 또는 next 두 값을 허용, data-slide-to 속성: 숫자 허용.-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
[전체코드]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<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">
<img src="a.jpg" alt="a" width="460" height="345">
<div class="carousel-caption">
<h3>a 제목</h3>
<p>a 내용</p>
</div>
</div>
<div class="item">
<img src="b.jpg" alt="b" width="460" height="345">
<div class="carousel-caption">
<h3>b 제목</h3>
<p>b 내용</p>
</div>
</div>
<div class="item">
<img src="c.jpg" alt="c" width="460" height="345">
<div class="carousel-caption">
<h3>c 제목</h3>
<p>c 내용</p>
</div>
</div>
<div class="item">
<img src="d.jpg" alt="d" width="460" height="345">
<div class="carousel-caption">
<h3>d 제목</h3>
<p>d 내용</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<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">Previous</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">Next</span>
</a>
</div>
</div>
</body>
</html>
Carousel 방법2 - JS 이용
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Activate Carousel with JavaScript</h2>
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="a.jpg" alt="a" width="460" height="345">
<div class="carousel-caption">
<h3>a 제목</h3>
<p>a 내용</p>
</div>
</div>
<div class="item">
<img src="b.jpg" alt="b" width="460" height="345">
<div class="carousel-caption">
<h3>b 제목</h3>
<p>b 내용</p>
</div>
</div>
<div class="item">
<img src="c.jpg" alt="c" width="460" height="345">
<div class="carousel-caption">
<h3>c 제목</h3>
<p>c 내용</p>
</div>
</div>
<div class="item">
<img src="d.jpg" alt="d" width="460" height="345">
<div class="carousel-caption">
<h3>d 제목</h3>
<p>d 내용</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
$(document).ready(function(){
// Activate Carousel (캐러셀 활성화)
$("#myCarousel").carousel();
// Enable Carousel Indicators (각 슬라이드 이동)
$(".item1").click(function(){
$("#myCarousel").carousel(0);
});
$(".item2").click(function(){
$("#myCarousel").carousel(1);
});
$(".item3").click(function(){
$("#myCarousel").carousel(2);
});
$(".item4").click(function(){
$("#myCarousel").carousel(3);
});
// Enable Carousel Controls (슬라이드 좌우이동)
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
$(".right").click(function(){
$("#myCarousel").carousel("next");
});
});
</script>
</body>
</html>
Carousel Option (옵션)
interval
각 슬라이드 사이의 지연 시간 (밀리 초) 지정. (기본값: 5000)
가능 속성값 유형: number | false
참고 : 항목이 자동으로 슬라이드 되는 걸 막으려면 interval을 false로 설정.
pause
마우스 포인터가 슬라이드쇼에 들어가면 슬라이드 일시 중지시키고,
마우스 포인터가 슬라이드쇼를 벗어나면 슬라이드를 다시 시작시킴. (기본값: hover)
가능 속성값 유형: string | false
참고 : 이 기능을 사용 안 하려면, pause 속성값을 false로 설정.
wrap
슬라이드 쇼가 모든 슬라이드를 계속 통과해야하는지 아니면 마지막 슬라이드에서 정지해야하는지 지정.
가능 속성값 유형: boolean
true - 지속적으로 반복 회전. (기본값)
false - 마지막 항목에서 멈춤.
Carousel Method (메서드)
.carousel (option)
옵션을 사용하여 슬라이드 쇼를 활성화. 유효한 값은 위 옵션 참조.
.carousel ( "cycle")
캐러셀 항목을 왼쪽에서 오른쪽으로 이동.
.carousel ( "pause")
캐러셀 일시정지.
.carousel (number)
지정된 항목으로 이동. (0부터 시작 : 첫 번째 항목은 0, 두 번째 항목은 1, ...).
.carousel ( "prev")
이전 항목으로 이동.
.carousel ( "next")
다음 항목으로 이동.
Carousel Event (이벤트)
slide.bs.carousel
캐러셀이 한 항목에서 다른 항목으로 슬라이드하려고 할 때 발생.
slid.bs.carousel
캐러셀이 한 항목에서 다른 항목으로 슬라이딩을 마치면 발생.
