Bootstrap 3

[basic] BS3 - Carousel (BS캐러셀 = BS슬라이드)

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

2,283

목록 글쓰기

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">



<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>



<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>



<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">



<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>



<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>



<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-* 속성 이용

[핵심코드]



<div id="myCarousel" class="carousel slide" data-ride="carousel">



<li data-target="#myCarousel" data-slide-to="1"></li>



<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">



<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>



<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>



<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">



<ol class="carousel-indicators">

<li class="item1 active"></li>

<li class="item2"></li>

<li class="item3"></li>

<li class="item4"></li>

</ol>



<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>



<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

캐러셀이 한 항목에서 다른 항목으로 슬라이딩을 마치면 발생.

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

코딩동강 관련글

HTML 관련글

CSS 관련글

JavaScript 관련글

JQuery 관련글

PHP 관련글

SQL 관련글

코멘트입력