사이트만들기 - 슬라이드 유형02

슬라이드 이펙트 - 좌로 움직이기

이번 슬라이드는 이미지가 왼쪽으로 순서대로 나열 되어있고 x축으로 움직여서 이미지를 나타내는 방식입니다.
이번에는 다양한 식으로 만들어 보았습니다. 한번 보시죠!

Javascript

자바스크립트로 구성되어있는 코드입니다. setInterval을 사용하여 반복하였습니다.
슬라이드의 길이를 구성하고 정해서 이미지 갯수가 변해도 모든 이미지가 출력 될 수 있도록 하였습니다.

javascript 보기

<script>
const sliderInner = document.querySelector(".slider__inner");   //움직이는 영역
const slider = document.querySelectorAll(".slider");            //이미지
let currentIndex = 0;                                           //현재 이미지

sliderInner.style.transition = "all 0.6s ease"; //애니메이션
setInterval(() => {
    currentIndex = (currentIndex + 1) % slider.length;


    sliderInner.style.transform = "translateX(" + -800 * currentIndex + "px)";   //이미지 움직임 
}, 2000);
</script>

gsap

GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다.
자바스크립트로 구현하기 어렵고 까다로운 것들을 패키지로 만들어 가져오기 편하게 만든 라이브러리입니다.
gasp를 사용하려면 js링크를 불러오듯이 CDN의 절대 주소를 가져와서 만들면 된다.

gsap

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let currentIndex = 0;

    setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;

    //     $(".slider__inner").css (
    //        "transform", "translateX("+ -800 * currentIndex+")"
    //     );
    // },2000);
    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate({left : -800 * currentIndex }, 600)
}, 2000);
</script>

Jquery

제이쿼리는 자바스크립트 라이브러리이므로, 자바스크립트 언어에 대한 기초 지식이 필요합니다.
또한, HTML 요소을 선택하고, CSS 스타일을 변경하는 등 HTML과 CSS와도 많은 연관이 있습니다. css에서 사용하던 transform 요소가 사용되지 않아서 다른 방식을 사용하여 작업하였습니다.

jquery보기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let currentIndex = 0;

    setInterval(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;

    //     $(".slider__inner").css (
    //        "transform", "translateX("+ -800 * currentIndex+")"
    //     );
    // },2000);
    $(".slider__inner").css("position", "relative");
    $(".slider__inner").animate({left : -800 * currentIndex }, 600)
}, 2000);
</script>

결과

원본 소스 보기