부트스트랩 카루셀: 초보자 가이드

안녕하세요, 야심勃勃한 웹 개발자 여러분! 오늘 우리는 부트스트랩 카루셀의 흥미로운 세계로 창 nhập하겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 단계별로 안내해 드리겠습니다. 그러니 안전벨트를 고정하고 즐거운 여행을 준비하세요!

개요: 카루셀은 무엇인가요?

사진 앨bum을 넘기는 것을 상상해 보세요, 하지만 페이지를 돌리는 대신 사진들이 마법처럼 슬라이드로 나타나고 사라집니다. 이것이 바로 웹페이지에서 카루셀의 역할입니다! 그것은 일반적으로 이미지들을 시각적으로 아름다운 방식으로 순환시키는 슬라이드쇼입니다.

기본 예제를 시작해 보겠습니다:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="첫 번째 슬라이드">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="두 번째 슬라이드">
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100" alt="세 번째 슬라이드">
</div>
</div>
</div>

이 코드는 세 장의 이미지로 구성된 간단한 카루셀을 만듭니다. carousel-inner 클래스는 우리의 슬라이드를 포함하며, 각 carousel-item은 단일 슬라이드를 나타냅니다. 첫 번째 아이템에 active 클래스가 있음을 주목하세요 - 이는 부트스트랩에게 처음에 보여야 할 슬라이드를 알립니다.

인디케이터: 길을 안내하다

이제 우리 카루셀에 导航을 추가해 보겠습니다. 인디케이터는 하단에 있는 작은 점으로, 현재 슬라이드를 보여주고 특정 슬라이드로 이동할 수 있게 합니다.

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- carousel-inner 내용 여기 -->
</div>

carousel-indicators 내의 각 button은 슬라이드에 대응합니다. data-bs-slide-to 어트리뷰트는 클릭할 때 부트스트랩이 이동할 슬라이드를 알립니다.

캡션: 문맥 추가

슬라이드에 텍스트를 추가하고 싶다면? 캡션을 사용하면 유용합니다!

<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>첫 번째 슬라이드 레이블</h5>
<p>첫 번째 슬라이드에 대한 일부 대표적인 플레이스홀더 콘텐츠.</p>
</div>
</div>

carousel-caption 클래스는 슬라이드에 텍스트 오버레이를 생성합니다. d-none d-md-block 클래스는 작은 화면에서는 숨기고 중간 화면 이상에서는 보여줍니다.

크로스fade: 부드러운 전환

카루셀 전환을 더 부드럽게 하고 싶다면 크로스fade 효과를 시도해 보세요:

<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- carousel 내용 여기 -->
</div>

carousel-fade 클래스를 주요 카루셀 div에 추가하면, 슬라이드가 슬라이드에서 사라지고 나타나는 대신 fade-in과 fade-out을 합니다.

자동 재생 카루셀: 계속 이동하다

카루셀을 자동으로 슬라이드를 순환시키려면 data-bs-ride="carousel" 어트리뷰트를 사용합니다:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- carousel 내용 여기 -->
</div>

이렇게 하면 페이지가 로드되면 바로 카루셀이 시작됩니다. 기본적으로 5초마다 슬라이드를 변경합니다.

개별 .carousel-item 인터벌

다른 슬라이드가 다른 시간 동안 표시되기를 원하신다면? 문제 없습니다! data-bs-interval 어트리뷰트를 사용합니다:

<div class="carousel-item" data-bs-interval="2000">
<img src="image2.jpg" class="d-block w-100" alt="Second slide">
</div>

이 슬라이드는 다음 슬라이드로 이동하기 전에 2초(2000밀리초) 동안 표시됩니다.

컨트롤이 없는 자동 재생 카루셀

자동 재생 카루셀을 사용하지만 보이는 컨트롤이 없이 싶다면, 컨트롤을 숨길 수 있습니다:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- carousel-inner 내용 여기 -->
</div>

carousel-indicators와 导航 버튼을 생략하면 카루셀이 자동 재생되지만 컨트롤이 보이지 않습니다.

터치 스와이프 비활성화

기본적으로 부트스트랩은 터치 가능한 장치에서 스와이프를 활성화합니다. 이를 비활성화하려면:

<div id="myCarousel" class="carousel slide" data-bs-touch="false">
<!-- carousel 내용 여기 -->
</div>

data-bs-touch="false" 어트리뷰트는 터치 스와이프를 비활성화합니다.

다크 버전

보다 세련된 모습을 원하신다면 다크 버전을 시도해 보세요:

<div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
<!-- carousel 내용 여기 -->
</div>

carousel-dark 클래스는 컨트롤과 인디케이터의 색상을 검정색으로 변경합니다. 이는 밝은 배경에 잘 어울립니다.

메서드 표

여기서는 카루셀을 프로그래매틱하게 제어할 수 있는 메서드 목록을 제공합니다:

메서드	설명
cycle	왼쪽에서 오른쪽으로 카루塞尔 아이템을 순환시킵니다.
pause	카루塞尔의 아이템 순환을 중지합니다.
prev	이전 아이템으로 이동합니다.
next	다음 아이템으로 이동합니다.
to	특정 프레임(0 기반, 배열과 유사)으로 카루塞尔을 이동합니다.
dispose	요소의 카루塞尔을 파괴합니다.

이 메서드들을 다음과 같이 호출할 수 있습니다:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
carousel.next()

이제 여러분은 부트스트랩으로 아름다운, 상호작용형 카루塞尔을 만드는 길을 잘 알고 계십니다. 연습이 완벽을 만들어 냅니다, 그러니 다양한 기능 조합을 실험해 보지 마세요. 행복한 코딩을 기원하며, 여러분의 카루塞尔이 항상 부드럽게 회전하길 바랍니다!

Credits: Image by storyset