2번은 위와 같이 좌측으로 슬라이드 되는 이펙트를 만들어보았습니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
<style>
/* slider__wrap */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider__img { /* 이미지가 보이는 영역 */
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.slider__inner{ /* 전체 이미지를 감싸고 있는 부모 : 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4000px;
height: 450px;
}
.slider { /*개별적인 이미지*/
position: relative;
width: 800px;
height: 450px;
}
</style>
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>JavaScript Slider Effect02</h1>
<p>슬라이드 이펙트 : 좌로 움직이기</p>
<ul>
<li><a href="sliderEffect01.html">1</a></li>
<li class="active"><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider"><img src="./img/sliderEffect06-min.jpg" alt=""></div>
<div class="slider"><img src="./img/sliderEffect07-min.jpg" alt=""></div>
<div class="slider"><img src="./img/sliderEffect08-min.jpg" alt=""></div>
<div class="slider"><img src="./img/sliderEffect09-min.jpg" alt=""></div>
<div class="slider"><img src="./img/sliderEffect10-min.jpg" alt=""></div>
</div>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="1346zany@gmail.com">1346zany@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>1번에서 이미지를 바꿔주고 slider__inner를 추가하였습니다.
거기에 맞춰 style 부분도 변경해주었습니다.
script
이번에도 같은 효과를 javascript, GSAP, jQuery 세가지 방법을 통해서 짜보았습니다.
선택자
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 3000; //이미지 변경 간격 시간
</script>슬라이드 이펙트 1번과 마찬가지로 선택자로 선택해줍니다.
javascript
<!-- javascript -->
<script>
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
//트렌지션 설정
sliderInner.style.transition = "all 0.6s"
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount; //1 2 3 4 0 1 2 3 4 0
console.log(currentIndex);
sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)";
},sliderInterval);
</script>slider inner가 움직이는 영역이므로 좌측으로 x축으로 움직일 수 있도록 translateX() 함수를 사용하여 이동 거리를 설정하며, -800 * i로 각각의 슬라이드를 구분합니다.
다음으로, sliderInner 요소에 transition 속성을 설정하여 슬라이드 이동 시의 애니메이션을 추가합니다.
그리고, setInterval() 함수를 사용하여 슬라이드 쇼를 자동으로 전환합니다.
currentIndex 변수를 사용하여 현재 보여지는 슬라이드의 인덱스를 저장하고, sliderCount 변수를 사용하여 전체 슬라이드의 개수를 저장합니다.
currentIndex 변수를 증가시키면서 슬라이드의 위치를 변경합니다.
마지막으로, sliderInterval 변수를 사용하여 슬라이드 전환 간격을 설정합니다.
setInterval() 함수를 사용하여 일정 시간 간격으로 슬라이드가 자동으로 전환되도록 합니다.
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
})
},sliderInterval);
</script>링크를 설정하여 GSAP 라이브러리를 가져옵니다.
setInterval() 함수를 이용하여 일정한 간격으로 이미지를 슬라이드합니다.
currentIndex 변수는 현재 보여지고 있는 이미지의 인덱스 값을 저장합니다.
currentIndex 변수를 증가시켜 다음 이미지로 넘어가는데, 이때 sliderCount 값으로 나눈 나머지 값으로 인덱스를 제한합니다.
GSAP의 to() 메소드를 이용하여 .slider__inner 클래스를 가지는 요소를 대상으로 애니메이션을 적용합니다.
x 속성을 이용하여 이미지를 좌우로 슬라이드합니다.
duration 속성은 애니메이션 지속 시간을 설정하며, 해당 코드에서는 1초로 설정됩니다
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);
</script>currentIndex를 이용하여 현재 슬라이더 인덱스를 가져오고, $(".slider").length를 이용하여 전체 슬라이더 개수를 가져옵니다.
계산된 currentIndex를 사용하여 슬라이더를 변경합니다.
animate() 함수를 사용하여 이미지 슬라이더를 구현합니다.
slider__inner 클래스를 사용하여 슬라이더 전체를 가져옵니다.
left 속성을 이용하여 이미지 슬라이더를 좌우로 이동시킵니다.
600은 이동 시간(밀리초)을 의미합니다.
이렇게 하면 위와 같은 화면을 3가지 방식으로 표현 할 수 있습니다.