좌로 슬라이드 효과
CSS와 HTML은 지난시간과 동일합니다. 바로 스크립트 두개재~ 👉
//javascript
sliderInner.style.transform = translateX("0px"); // -800 * 0
sliderInner.style.transform = translateX("-800px"); // 이미지의 위드값 // -800 * 1
sliderInner.style.transform = translateX("-1600px"); // -800 * 2
sliderInner.style.transform = translateX("-2400px"); // -800 * 3
sliderInner.style.transform = translateX("-3200px"); // -800 * 4
sliderInner.style.transform = translateX("0px"); // -800 * 0
//javascript 트랜지션 설정
sliderInner.style.transition = "all 0.6s"
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
console.log(currentIndex);
sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
}, sliderInterval);JavaScript
sliderInner 는 슬라이드 내의 이미지들을 말합니다.
sliderInner.style.transform을 사용하여 슬라이드쇼의 이미지를 왼쪽으로 이동시키는 효과를 구현합니다.
이 코드는 각각의 이미지를 보여주기 위해 translateX() 함수를 사용하여 슬라이드쇼의 이미지를 이동시킵니다.
이미지의 너비는 800픽셀이고, translateX() 함수의 인자로 전달되는 픽셀 값은 현재 이미지의 인덱스(currentIndex)에 따라 계산됩니다.
sliderInner.style.transition을 사용하여 이미지가 이동하는 효과를 부드럽게 구현합니다.
setInterval 함수를 사용하여 이미지를 자동으로 이동시키는 데 사용됩니다.
이 함수는 일정한 시간 간격(sliderInterval)으로 currentIndex 값을 증가시키고, sliderInner.style.transform을 사용하여 이미지를 이동시킵니다. currentIndex 값은 슬라이드쇼에서 현재 보여지고 있는 이미지의 인덱스를 나타냅니다.
슬라이드쇼가 무한 반복되도록 하기 위해, currentIndex 값이 sliderCount(이미지의 총 개수)보다 크면 currentIndex 값을 0으로 설정합니다.
이것은 currentIndex 값을 이미지의 인덱스로 나눈 나머지를 사용하여 구현됩니다.
console.log(currentIndex)를 사용하여 현재 이미지의 인덱스를 콘솔에 출력합니다. 이 코드는 디버깅용으로 사용됩니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1 ) % sliderCount;
gsap.to(".slider__inner", {
x : -800 * currentIndex,
duration : 1,
ease: "circle.out(1,0.3)"
})
}, sliderInterval);
</script>GSAP 란?
GSAP( GreenSock Animation Platform)은 HTML5 및 JavaScript 기반의 웹 애니메이션 및 인터랙션을 구축하는 데 사용되는 JavaScript 라이브러리입니다. GSAP은 jQuery와 같은 다른 자바스크립트 애니메이션 라이브러리와 비교하여 매우 높은 성능을 제공하며, 다양한 애니메이션 기능을 제공합니다. GSAP을 사용하면 강력하고 복잡한 애니메이션을 상대적으로 간단한 코드로 만들 수 있으며, 다양한 브라우저 및 디바이스에서 잘 작동합니다.
- setInterval 함수를 사용하여 일정 시간마다 이미지를 전환합니다. sliderInterval 변수는 이미지를 전환하는 간격을 나타내는 값입니다.
- currentIndex 변수는 현재 슬라이더의 인덱스를 나타내며, sliderCount 변수는 전체 슬라이더의 개수를 나타냅니다.
- currentIndex 변수는 각각의 슬라이더 인덱스 값을 갖고, sliderCount 값으로 나눈 나머지 값을 다시 할당합니다. 이를 통해 슬라이더 인덱스 값이 전체 슬라이더 개수를 초과하지 않도록 합니다.
- gsap.to() 함수를 사용하여 .slider__inner 클래스를 가진 요소의 x 속성 값을 변경합니다. 이를 통해 슬라이더 요소를 이동시키며, currentIndex 값을 이용하여 현재 보여지는 슬라이더를 변경합니다.
- duration 속성은 애니메이션 지속 시간을 지정하며, ease 속성은 애니메이션 효과를 지정합니다.
즉, 이 코드는 이미지 슬라이더를 자동으로 전환하는 코드로, setInterval 함수를 이용하여 일정 시간마다 슬라이더 요소를 이동시켜 다음 이미지를 보여줍니다.
jQuery
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
setInterval(() => {
currentIndex = (currentIndex + 1) % $(".slider").length;
$(".slider__inner").css("position", "relative")
; $(".slider__inner").animate({left : -800 * currentIndex}, 600);
}, sliderInterval);
//제이쿼리는 트렌스x를 지원안하기 때문에 left사용, left면 포지션이 필요함- setInterval 함수를 사용하여 일정 시간마다 이미지를 전환합니다. sliderInterval 변수는 이미지를 전환하는 간격을 나타내는 값입니다.
- currentIndex 변수는 현재 슬라이더의 인덱스를 나타내며, $(".slider").length는 전체 슬라이더의 개수를 나타냅니다.
- currentIndex 변수는 각각의 슬라이더 인덱스 값을 갖고, $(".slider").length 값으로 나눈 나머지 값을 다시 할당합니다. 이를 통해 슬라이더 인덱스 값이 전체 슬라이더 개수를 초과하지 않도록 합니다.
- $(".slider__inner")은 슬라이더 요소를 나타내는 jQuery 선택자입니다. css 메소드를 사용하여 position 속성을 relative로 변경합니다. 이를 통해 슬라이더 요소를 이동시키기 위한 기준 위치를 변경합니다.
- animate 메소드를 사용하여 슬라이더 요소를 이동시킵니다. left 속성을 이용하여 슬라이더 요소를 이동시키며, currentIndex 값을 이용하여 현재 보여지는 슬라이더를 변경합니다. 600은 애니메이션 지속 시간을 나타내며, 이 값을 변경하여 애니메이션 지속 시간을 조절할 수 있습니다.
즉, 이 코드는 이미지 슬라이더를 자동으로 전환하는 코드로, setInterval 함수를 이용하여 일정 시간마다 슬라이더 요소를 이동시켜 다음 이미지를 보여줍니다. jQuery를 이용하여 슬라이더 요소를 선택하고, css 메소드와 animate 메소드를 사용하여 슬라이더 요소를 이동시킵니다.