캐로셀

캐로셀

회전목마처럼 요소들의 순환시키는(cycling) 슬라이드 쇼(Slide show) 이다.

• 움직임이있어야하는 태그들은 자바스크립트 추가해줘야함

 <!-- 자바스크립트 -->

<script>
    // 자바스크립트로 캐로셀 동작
    $('.carousel').carousel({
      interval: 2000, //속도
      pause: 'hover' //마우스를 올렸을때 움직임 멈춤 'flase' 마우스를 올려도 계속움직임
    })
  </script>
  

<div id="caro1" class="carousel slide" data-ride="carousel">
    <!-- 기본 사진 슬라이드 -->
    <div class="carousel-inner " style="height: 100vh;">
      <div class="carousel-item active">
        <img src="img/pic1.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="img/pic2.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="img/pic3.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="img/pic4.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="img/pic5.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
    <!-- 화살표 -->
    <a class="carousel-control-prev" href="#caro1" 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="#caro1" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

링크텍스트