캐러셀, Carousel, 슬라이드쇼

캐러샐이란 파워포인트의 슬라이드쇼 같은 것이다.

동일한 화면 위치에서 특정한 규칙에 따라 글이나 사진 같은 데이터들이 넘겨진다.

마우스나 방향키를 사용해 옆으로 넘길 수도 있고,

자동으로 넘어가도록 설정할 수도 있다.

 

1. 슬라이드 자동 넘기기

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color:red; height:500px;">
    </div>
    <div class="carousel-item" style="background-color:yellow; height:500px;">
    </div>
    <div class="carousel-item" style="background-color:blue; height:500px;">
    </div>
  </div>
</div>

 

2. 옵션 넣기

이런 옵션을 설정할 때는 반드시 이름에 data-bs-를 붙인다.

1) interval 속도 조절하기

interval은 어떤 것과 어떤 것 사이의 간격을 의미한다.

기본값은 5000밀리초이다= 5초 

interval 옵션을 통해 데이터 간 변경 속도를 조절한다.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-interval=1000 data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color:red; height:500px;">
      <h1>>>>>>>>속도(interval)을 1초로 수정함</h1>
    </div>
    <div class="carousel-item" style="background-color:yellow; height:500px;">
      <h1>>>>>>>>속도(interval)을 1초로 수정함</h1>
    </div>
    <div class="carousel-item" style="background-color:blue; height:500px;">
      <h1>>>>>>>>속도(interval)을 1초로 수정함</h1>
    </div>
  </div>
</div>

 

2) hover-pause 마우스를 올리면 일시정지하기

hover 기능을 이용하여 슬라이드 쇼 중에 원하는 데이터가 등장할 때 

마우스를 가져다대면 슬라이드 쇼가 멈추는 기능이다.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-interval=1000 data-bs-pause-=hover data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color:red; height:500px;">
      <h1>>>>>hover기능으로 슬라이드쇼 멈춤</h1>
    </div>
    <div class="carousel-item" style="background-color:yellow; height:500px;">
    </div>
    <div class="carousel-item" style="background-color:blue; height:500px;">
    </div>
  </div>
</div>

 

3) slide 기능 없애기

class = "carousel slide"에서 slide를 지워준다.

<div id="carouselExampleSlidesOnly" class="carousel" data-bs-interval=1000 data-bs-pause-=hover data-bs-ride="carousel">

 

 

 

3. Control 버튼 만들기

넘기는 버튼을 눌러야지 다음 슬라이드로 넘어가도록 구현한다.

여기서는 옵션 중, hober, intervals은 더이상 필요하지 않다. 

기본적으로 정지해있기 때문이다.

 

1) data-bs-ride="false"

우선 옵션에서 ride 부분을 false로 바꾼다.

사용자가 첫 슬라이드를 넘기기 전에는 슬라이드가 자동으로 바뀌지 않도록 한다.

만약 data-bs-ridce="carousel"로 하면, 처음부터 슬라이드가 자동으로 바뀐다.

 

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="false">

 

2) 버튼 button

그리고 이전과는 달리,

사용자가 클릭해야 할 '넘기는 버튼'이 필요하다.

  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

 

3) 버튼 타겟 button target

버튼의 타겟을 재설정한다.

data-bs-target 부분을 내가 슬라이드쇼로 보여주고 싶은 캐러샐 id로 바꿔준다.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="false">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color:red; height:500px;">
    <h1>버튼 만들어 슬라이드쇼 컨트롤하기</h1>
    </div>
    <div class="carousel-item" style="background-color:yellow; height:500px;">
    </div>
    <div class="carousel-item" style="background-color:blue; height:500px;">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

 

 

4. aria-hidden

시각 장애가 있는 사람이 웹사이트에 접속하면,

화면에 보이는 것을 음성으로 말해주는 시스템이 있다.

시각 장애인이 꼭 알아야 하는 부분을  aria-hidden="true"로 설정한다.

그런데, 모든 것을 말해주면 효율성이 낮아진다. 그래서 들을 필요가 없는 내용은 건너뛸 수 있도록 만든다.

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>