회전 목마를 생각할 때 일반적으로 생각나는 것은 어린 시절 탔을지도 모르는 놀이 공원 놀이기구입니다. 놀이기구가 진행됨에 따라 오르내리는 다채로운 회전 목마와 함께 회전하는 큰 플랫폼입니다.
Bootstrap Carousel은 우리가 어렸을 때 알게 된 재미있는 종류가 아니지만 개념은 유사합니다. 이 기사에서는 부트스트랩을 시작하는 방법을 검토하고 캐러셀 UI 요소가 무엇인지, 언제 사용하는 것이 좋은지, 부트스트랩 프레임워크를 사용하여 구성하는 방법에 대해 설명합니다.
시작하기
Bootstrap Carousel을 설정하기 위해 가장 먼저 해야 할 일은 적절한 종속성이 있는지 확인하는 것입니다. 이를 위해서는 Bootstrap, PopperJS 및 jQuery가 필요합니다. 프로젝트에 종속성을 추가하는 데 도움이 필요하면 Bootstrap의 빠른 시작 페이지를 살펴보십시오.
종속성 요구 사항을 처리하는 방법은 사용자의 결정이지만, 가장 쉽고 초보자 친화적인 방법은 jQuery, Popper.js 및 Bootstrap용 콘텐츠 전달 네트워크(CDN)를 사용하는 것입니다. <script>의 순서에 주의하세요. 태그 – 여기에서 주문이 중요합니다.
이제 시작할 준비가 되었습니다!
부트스트랩 문서를 사용하여 캐러셀 만들기
Introduction/Getting Started 왼쪽 페이지에 다양한 항목으로 연결되는 사이드바가 표시됩니다. Components를 살펴보세요. 링크하고 클릭하십시오. 그러면 Bootstrap에서 사용 가능한 여러 구성 요소 중 첫 번째 구성 요소인 Alerts로 이동합니다. . 사이드바를 다시 살펴보면 사용 가능한 모든 구성 요소에 대한 다른 링크가 표시됩니다.
Carousel을 클릭합니다. 시작하기 위한 구성 요소입니다. 여기에 필요한 정보가 있습니다.
작동 방식
부트스트랩은 CSS 변환 속성과 일부 JavaScript를 활용하여 슬라이드가 한 슬라이드에서 다음 슬라이드로 이동할 때 캐러셀을 작동합니다. 가장 기본적인 캐러셀은 일정 시간이 지나면 한 이미지에서 다음 이미지로 이동하는 일련의 이미지 또는 마크업입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</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">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item"><img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
</div>
</div>
</div>
<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 src="script.js"></script>
</body>
</html>
다음은 귀하가 생소할 수 있는 위에서 본 몇 가지 속성과 그 의미입니다.
| 속성 | 의미 |
| data-ride="회전 목마" | 페이지 로드 시 애니메이션 |
| data-interval="거짓 | [숫자(밀리초)]” | 거짓으로 설정하면 캐러셀이 자동으로 순환하지 않습니다. 그렇지 않으면 밀리초 단위의 숫자를 기준으로 순환합니다. |
| data-pause="hover" | 사용자가 캐러셀 위로 마우스를 가져가면 캐러셀이 현재 활성 이미지에서 일시 중지됩니다. 마우스를 놓으면 캐러셀이 순환 프로세스를 다시 시작합니다. |
| class="활성" | 어떤 이미지를 보여줄지 알기 위해서는 활성이 필요합니다. |
| class="d-블록" | 디스플레이:차단; |
| class="w-100" | 폭:100%; |
컨트롤 사용
이 기본 순환 구조 외에도 Bootstrap은 구성 요소에 대한 회전식 컨트롤을 제공합니다. 여기에서 대부분의 JavaScript가 작동합니다. 부트스트랩은 JavaScript 유틸리티 기능을 사용하여 사용자가 컨트롤을 클릭할 때 캐러셀이 작동하도록 합니다.
아래 코드 스니펫에서 이미지 양쪽에 이전 화살표와 다음 화살표가 표시됩니다. 타이머에서 이전처럼 작동하는 것 외에도 사용자가 화살표 중 하나를 클릭하면 이미지가 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</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">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<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 src="script.js"></script>
</body>
</html>
컨트롤이 작동하는 방식에 대해 이해해야 할 가장 중요한 점은 href가 캐러셀의 전체 div에 대한 고유 ID와 일치해야 한다는 것입니다.
다음 컨트롤:
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
회전 목마의 가장 바깥쪽 컨테이너:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
링크가 작동하려면 강조 표시된 영역이 일치해야 합니다.
지표 포함
컨트롤을 사용하여 캐러셀 순환을 작동하는 것 외에도 캐러셀에 있는 블록 요소의 수를 표시하여 현재 있는 이미지를 나타낼 수 있습니다. 컨트롤과 함께 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Navbar</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">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Bootcamps
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Popular Bootcamps</a>
<a class="dropdown-item" href="#">Bootcamp Prep</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Bootcamp Financing</a>
<a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a>
</div>
</li>
<li class="nav-item dropdown">lid
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Coding
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Coding Tools</a>
<a class="dropdown-item" href="#">Git</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python</a>
<a class="dropdown-item" href="#">Ruby</a>
<a class="dropdown-item" href="#">C++</a>
<a class="dropdown-item" href="#">Java</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item smallcaps" href="#">Career Advice</a>
<a class="dropdown-item smallcaps" href="#">Interviews</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item smallcaps" href="#">Tech Cities</a>
<a class="dropdown-item smallcaps" href="#">Tech Salaries</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tech Fields
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web Design</a>
<a class="dropdown-item" href="#">Web Development</a>
<a class="dropdown-item" href="#">Software Engineering</a>
<a class="dropdown-item" href="#">Data Science</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link smallcaps" href="#">News & Commentary</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<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 src="script.js"></script>
</body>
</html>
위의 코드 조각에서 정렬된 목록은 표시기를 표시하는 것입니다. .active 클래스는 carousel-items의 활성 클래스와 일치합니다. .
결론
이것은 처음에는 소화해야 할 많은 정보처럼 보일 수 있습니다. 기억해야 할 가장 중요한 것은 문서를 따르는 것입니다. 문서가 너무 잘 작성되고 상세할 때 이 작업을 수행하는 방법을 반드시 외울 필요는 없습니다.
Bootstrap의 끝에서 모든 것이 어떻게 작동하는지 알고 있는 것은 확실히 좋은 생각입니다. Bootstrap에서 요소의 스타일이 지정되고 스크립트된 방법을 볼 시간이 있다면 축소된 CSS 및 JS 파일을 살펴보십시오. 또한 필요에 맞게 조정하고 프로젝트에서 사용할 수 있도록 예제 코드에서 모든 속성이 의미하는 바를 최소한 알고 있어야 합니다.
마지막으로 캐러셀 구성 요소가 접근성 측면에서 사용하기에 가장 적합하지 않을 수 있다는 점에 유의하십시오. 페이지를 가능한 한 계속해서 액세스할 수 있도록 만들고 다른 곳에서도 찾을 수 없는 캐러셀의 정보를 사용하지 마십시오.
Bootstrap 사용에 대한 여정을 계속하는 동안 행운을 빕니다!