728x90
728x90
부트스트랩의 캐로우젤(Carousel)은 회전목마처럼 요소들의 순환시키는(cycling) 슬라이드 쇼(Slide show) 이다.
웹페이지 메인에서 자주 쓰이는 슬라이드로 본문 페이지 등에 이미지 슬라이드로 자주 쓰이는 기능이니 익혀두면 좋다.
실습하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>부트스트랩Carousel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.carousel-inner > .carousel-item > img{
/* width: 640px;
height: 720px; */
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
$('.carousel').carousel({
interval: 2000 //기본 5초
})
</script>
<div class="container"><h2>Carousel practice</h2></div>
<div id="demo" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- 슬라이드 쇼 -->
<div class="carousel-item active">
<!--가로-->
<img class="d-block w-100"
src="https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>TEST</h5>
<p>testtesttest</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="https://images.pexels.com/photos/2355519/pexels-photo-2355519.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100"
src="https://images.pexels.com/photos/2544554/pexels-photo-2544554.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
alt="Third slide">
</div>
<!-- / 슬라이드 쇼 끝 -->
<!-- 왼쪽 오른쪽 화살표 버튼 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<!-- <span>Previous</span> -->
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<!-- <span>Next</span> -->
</a>
<!-- / 화살표 버튼 끝 -->
<!-- 인디케이터 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li> <!--0번부터시작-->
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- 인디케이터 끝 -->
</div>
</body>
</html>
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
getbootstrap.com
728x90
728x90
'Frameworks > Bootstrap' 카테고리의 다른 글
| 부트스트랩 (16) chart.js 로 차트 그리기 (3) | 2019.07.17 |
|---|---|
| 부트스트랩 (15) 구글폰트를 이용한 예제 (0) | 2019.07.10 |
| 부트스트랩 (13) 카드 (프로필 꾸미기) (2) | 2019.07.10 |
| 부트스트랩 (12) Collapse 메소드 (0) | 2019.07.10 |
| 부트스트랩 (11) onload 이벤트 (0) | 2019.07.10 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
