슬라이드 이펙트 세 번째

이미지 좌우로 움직이기

이번 슬라이더 이펙트는 slider__inner 클래스 div 을 만들어서 img의 width * 갯수 로하여서 전체 width값을 잡아줍니다.
또한 상위 slider__img 를 이용해 overflow: hidden; 을 주어서 넘치는 영역을 안보이게합니다.
js를 이용하여 sliderInner.style.transition = "all 0.6s" 을 주어서 애니메이션 효과를 넣고
setInterval 이용하여 slider__inner 의 위치를 img의 width 값에 맞게 변경해줍니다.
그리고 다시 첫번째로 자연스럽게 가기위해서 마지막 이미지를 다시 첫번째로 한 후
setTimeout 을이용하여 자연스럽게 만들어줍니다.
또한 Gasp 와 jquery 를이용하여 만들어봤으니 자세한 내용은 아래에있는 소스보기를 통하여 봐주시면되겠습니다.

원본 소스 보기 원본 사이트 보기