Bootstrap 4 Carousel : 자동 재생 중지 방법 부트스트랩 슬라이더

처음 퍼블리셔를 시작했을 때 내게 카루셀(Carousel)은 악몽 같은 존재였다.

클라이언트들이 요구하는 각종 사안을 적용해서 슬라이더를 매번 새로 만들어야 했기 때문이다.

요즘은 부트스트랩같은 라이브러리가 많이 사용되고 있어서 슬라이더 구현이 너무 편하다.

Bootstrap 4는 별로 친절하지 않다.

Bootstrap 4에 카루셀 슬라이더가 있지만, 처음부터 자동재생이다.

이걸 원한다면 너무도 간편한 방법이지만, 처음에 멈춰 있기를 원한다면 이 때는 패닉이다.

방법은 의외로 간단하고 무궁무진하다.

먼저 예제를 보자.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

가장 간단한 방법은 

data-ride =”carousel”

를 빼 버리는 방법이다.

이게 없으면 부트스트랩 슬라이더는 멈춰 있다.

아니 멈춰두면 이게 뭐냐? 싶겠지만 부트스트랩 슬라이더는 Prev, Next를 지원한다.

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." 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>

퍼블리싱 단계에서 자바스크립트나 제이쿼리를 만질 필요도 없다.

다른 방법은 

data-interval = "false"

를 추가하는 방법이다.

추가하느니 빼는게 낫다.

그 이외의 방법은 스크립트를 건드리고 싶을 때 스크립트 단에서 제어하는 방법이다.

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

이게 먹힐 것이라고 기대하지 않는 사람들도 있지만 이게 먹히네~

그리고 마찬가지로 data-interval = "false" 대신에 스크립트에 interval: false를 주는 방법이다.

<script>
    $(document).ready(function() {      
        $('.carousel').carousel(
        	interval: false
        );
    });
</script>