Bootstrap 캐러셀(Carousel) 전환 속도(시간 간격) 변경하기

Bootstrap은 가장 널리 사용되는 가볍고 강력한 HTML/CSS/JavaScript 프레임워크 중 하나입니다.
이미지 슬라이더, 메인 배너, WordPress 테마 제작에도 자주 활용됩니다.
Bootstrap 캐러셀은 반응형 웹에서 이미지를 매끄럽게 보여주기에 탁월한 기능입니다.

기본값으로 캐러셀은 일정한 간격으로 자동 전환되지만, 디자인 목적에 맞게
슬라이더 속도를 조절하고 싶을 수 있습니다. 이미지 미리보기용으로는 더 빠르게,
스토리텔링 슬라이드쇼에는 더 느리게 설정하는 식입니다. 아래에서
시간 간격을 조정하고 전환 애니메이션 속도까지 다듬는 방법을 살펴보세요.

Bootstrap 코어 JavaScript/CSS 파일을 수정할 필요는 없습니다.
HTML과 스타일시트에서 간단히 설정만 덧붙이면 됩니다.

Bootstrap 캐러셀 시간 간격 설정

아래는 기본 캐러셀 스니펫입니다.

<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="img_chania.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_chania2.jpg" alt="Chania"> </div>
    <div class="item"> <img src="img_flower.jpg" alt="Flower"> </div>
    <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </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>

data-interval 추가하기

각 슬라이드의 표시 시간을 제어하려면 래퍼에 data-interval을 추가하세요.

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

• 1000 = 1초
• 3000 = 3초
• 3000 값을 원하는 간격으로 바꾸면 됩니다.

이 방법이 반응형 사이트에서 캐러셀 속도를 제어하는 가장 간단한 방법입니다.

CSS로 전환 애니메이션 시간 변경

시간 간격은 슬라이드가 머무는 시간을 의미하고, 애니메이션 전환 자체도 조절할 수 있습니다.
Bootstrap 기본 전환 시간은 0.6초입니다. 더 느린 페이드/슬라이드를 원하면 CSS에서 시간을 늘리세요.

.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.2s ease-in-out !important;
    -o-transition: -o-transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out !important;
}

위 예시는 1.2초로 느리게 설정한 것입니다. 원하는 효과에 맞게 값을 조정하세요.

왜 속도를 조절할까?

• UX: 스토리텔링·제품 하이라이트에는 긴 슬라이드가 유리합니다.
• 이커머스: 빠른 탐색을 위해 짧은 간격이 적합할 수 있습니다.
• SEO/참여도: 부드러운 상호작용은 체류 시간 향상에 기여합니다.
• WordPress 테마: Bootstrap 기반 테마에서도 동일하게 적용됩니다.

마무리

Bootstrap 캐러셀은 단순하고 반응형이며 호환성이 뛰어납니다.
간격과 애니메이션 시간을 조절하면 포트폴리오, 블로그, 쇼핑몰 어디서든
슬라이더의 완성도를 높일 수 있습니다.