[Javascript] - Slide/Carousel 효과내기

Javascript에 다양한 Slide 라이브러리가 있다.

 

Owl Carousel, Swiper JS, Splide, Flicking 등등

 

라이브러리를 사용하는 것도 좋은 방법이지만, 때로는 직접 만들어보는것도 좋다.

 

1. HTML

// HTML
<div class="slide-container">
    <div class="slide-row">
        <div class="image-fade">
            <img src="image1" alt="">
        </div>
        <div class="image-fade">
            <img src="Image2" alt="">
        </div>
        <div class="image-fade">
            <img src="Image3" alt="">
        </div>
    </div>
</div>

 

2. JS

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("image-fade");

    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1
    }
    slides[slideIndex - 1].style.display = "block";

    setTimeout(showSlides, 2000); // 2초마다 이미지가 체인지됩니다
}

 

3. CSS

.slide-row {
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.image-fade {
    border-radius:3%;
    width: 100%;
    // height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide-container {
    display: flex;
    justify-content: center;
    position: relative;
    margin: auto;
}

// Optional
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
  from {
      opacity: .2
  }
  to {
      opacity: 1
  }
}
//

 

@keyframes

@keyframes CSS at-규칙은 애니메이션 시퀀스를 따라 키프레임(또는 웨이포인트)에 대한 스타일을 정의하여 CSS 애니메이션 시퀀스의 중간 단계를 제어합니다. 이를 통해 전환보다 애니메이션 시퀀스의 중간 단계를 더 효과적으로 제어할 수 있습니다.

- MDN web docs

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

 

keyframes는 CSS 애니메이션 사용시, 구간을 정해 각 구간별로 어떠한 스타일을 적용할 지 작성하는 문법이다.

 

@keyframes 필요요소

• animation-name: @keyframes가 적용될 애니메이션 이름. 사용자 임의로 부여
• stage: 0~100%의 구간
• css style: 각 구간에 적용될 style

animation 속성

• animation-name
• animation-duration: 2s;
  • 애니메이션 완료까지 소요 시간
• animation-delay: 1s;
  • 애니메이션이 시작 전 지연시간
• animation-iteration-count: infinite;
  • 반복횟수
• animation-timing-function: ease-out;
  • 애니메이션 실행 속도
• animation-direction: alternate;
  • 애니메이션 방향 (앞, 뒤, 번갈아 재생 여부)
• animation-fill-mode: backwards;
  • 애니메이션 시작전, 끝나기 전 스타일 지정
• animation-play-state:paused;
  • 애니메이션 실행 여부(running, paused)