Bootstrap - Cross fade

bootstrap에는 여러가지 기능이 있습니다. 그중에 Cross fade 기능이 있습니다, carousel은 보변적으로 슬라이드 방식으로 이미지가 넘어가는 반면에 Cross fade기능은 이미지가 부드럽게 넘어갑니다, 저도 이미지를 넘길 때에는 슬라이드 방식보다는 Cross fade 기능을 많이 선호합니다.

bootstap Link : https://getbootstrap.com/docs/4.5/components/carousel/

Carousel

(여기에서 Crossfade 라고 적힌 부분의 코드를 복사 붙여넣기하면 됩니다.)

사용예시

<div id="carouselExampleFade" class="carousel slide carousel-fade" 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="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>