여러 이미지를 저장해 슬라이드 형식으로 이미지를 보여주는 페이지를 만들었습니다.
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>01. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Slider Effect01</h1>
<p>슬라이드 이펙트 : 트랜지션 효과</p>
<ul>
<li class="active"><a href="sliderEffect01.html">1</a></li>
<li><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>
<li><a href="sliderEffect06.html">6</a></li>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider"><img src="./img/sliderEffect01-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect02-min.jpg" alt="이미지2"></div>
<div class="slider"><img src="./img/sliderEffect03-min.jpg" alt="이미지3"></div>
<div class="slider"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
<div class="slider"><img src="./img/sliderEffect05-min.jpg" alt="이미지5"></div>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:hyejeong3283@gmail.com">hyejeong3283@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>
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 {
position: absolute;
left: 0;
top: 0;
transition: all 0.3s;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0,0,0,0.4);
color: #fff;
padding: 5px 10px;
}
.slider:nth-child(1)::before {content: '이미지1';}
.slider:nth-child(2)::before {content: '이미지2';}
.slider:nth-child(3)::before {content: '이미지3';}
.slider:nth-child(4)::before {content: '이미지4';}
.slider:nth-child(5)::before {content: '이미지5';}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}
</style>
SCRIPT
선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간선택자를 변수를 선언하여 만들어줍니다.
위 선택자들은 javascript, GSAP, jQuery에서 공통적으로 사용해 줄겁니다.
javascript
setInterval(() => {
// 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 // currentIndex
// 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1 // nextIndex
let nextIndex = (currentIndex + 1) % sliderCount;
slider[currentIndex].style.opacity = "0";
slider[nextIndex].style.opacity = "1";
currentIndex = nextIndex;
console.log(currentIndex);
}, sliderInterval);
slider[0].style.opacity = "0"; // 첫번째 이미지를 안보이게
slider[1].style.opacity = "1"; // 두번째 이미지를 안보이게
slider[1].style.opacity = "0"; // 두번째 이미지를 안보이게
slider[2].style.opacity = "1"; // 세번째 이미지를 안보이게
slider[2].style.opacity = "0"; // 세번째 이미지를 안보이게
slider[3].style.opacity = "1"; // 네번째 이미지를 안보이게
slider[3].style.opacity = "0"; // 네번째 이미지를 안보이게
slider[4].style.opacity = "1"; // 다섯번째 이미지를 안보이게
slider[4].style.opacity = "0"; // 다섯번째 이미지를 안보이게
slider[5].style.opacity = "1"; // 첫번째 이미지를 안보이게setInterval 함수를 사용해서 3초마다 다음 이미지가 보이도록 합니다.
let nextIndex = (currentIndex + 1) % sliderCount;으로 다음 이미지의 인덱스 값을 구하고,
slider[currentIndex].style.opacity = "0";으로 현재 보이는 이미지를 투명도를 0으로 만들어서 안 보이게 합니다.
그리고 slider[nextIndex].style.opacity = "1";으로 다음 이미지를 투명도를 1로 만들어서 보이도록 합니다.
마지막으로 currentIndex = nextIndex;으로 현재 보이는 이미지의 인덱스 값을 갱신합니다.
콘솔창에 console.log(currentIndex);을 출력해서 현재 보이는 이미지의 인덱스 값을 확인할 수 있습니다.
GSAP
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
setInterval(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
gsap.to(slider[currentIndex], { duration: 0.5, opacity: 0 });
gsap.to(slider[nextIndex], { duration: 0.5, opacity: 1 });
currentIndex = nextIndex;
}, sliderInterval);
</script>setInterval 함수를 이용해서 일정한 시간 간격으로 이미지가 변경됩니다.
sliderInterval 변수에는 이미지가 변경될 시간 간격이 저장되어 있습니다.
let nextIndex = (currentIndex + 1) % sliderCount;으로 다음 이미지의 인덱스 값을 계산합니다.
gsap.to(slider[currentIndex], { duration: 0.5, opacity: 0 });과 gsap.to(slider[nextIndex], { duration: 0.5, opacity: 1 }); 은 GSAP의 to() 메소드를 이용해서 슬라이더 이미지의 투명도를 조절합니다.
첫 번째 인자로는 애니메이션 대상 요소를 선택하고, 두 번째 인자로는 애니메이션 속성을 설정합니다.
duration은 애니메이션 진행 시간을 설정하는 속성이고, opacity는 투명도를 나타내는 속성입니다.
마지막으로 currentIndex = nextIndex;로 현재 이미지의 인덱스 값을 갱신합니다.
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(() => {
let nextIndex = (currentIndex + 1) % sliderCount;
$(slider[currentIndex]).animate({ opacity: 0 }, 500);
$(slider[nextIndex]).animate({ opacity: 1 }, 500);
currentIndex = nextIndex;
console.log(currentIndex);
}, sliderInterval);
</script>setInterval 함수를 이용해서 일정한 시간 간격으로 이미지가 변경됩니다.
sliderInterval 변수에는 이미지가 변경될 시간 간격이 저장되어 있습니다.
let nextIndex = (currentIndex + 1) % sliderCount;으로 다음 이미지의 인덱스 값을 계산합니다.
$(slider[currentIndex]).animate({ opacity: 0 }, 500);과 $(slider[nextIndex]).animate({ opacity: 1 }, 500);은 jQuery의 animate() 메소드를 이용해서 슬라이더 이미지의 투명도를 조절합니다.
첫 번째 인자로는 애니메이션 대상 요소를 선택하고, 두 번째 인자로는 애니메이션 속성을 설정합니다.
opacity는 투명도를 나타내는 속성이고, 500은 애니메이션 진행 시간을 설정하는 값입니다.
마지막으로 currentIndex = nextIndex;로 현재 이미지의 인덱스 값을 갱신합니다.