이번 시간은 저번에 제작한 마우스 이펙트 내용과 비슷하게 제작하였습니다.
<!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">
<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>
</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:ebmdols@naver.com">ebmdols@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>구조는 이미지 5장이 겹친 상태로 짜두었습니다.
.slider__wrap: 슬라이더를 감싸는 div 요소로, 전체 화면을 차지하며 가운데 정렬되어 있습니다.
.slider__img: 실제 이미지가 보여지는 영역을 나타내는 div 요소입니다. width와 height 속성으로 이미지의 크기를 지정하고, overflow 속성으로 이미지가 div의 영역을 넘어갈 경우 숨기도록 설정합니다.
.slider: 실제 이미지가 배치되는 div 요소입니다. position: absolute 속성으로 .slider__img 내부에서 위치를 조정하며, 각각의 이미지는 nth-child() 선택자로 구분됩니다.
.slider::before: .slider 요소의 앞쪽에 레이블을 추가하기 위한 가상요소입니다. position: absolute 속성으로 .slider 내부에서 위치를 조정하고, content 속성으로 레이블의 내용을 지정합니다.
.slider:nth-child(n): nth-child() 선택자로 구분된 각 .slider 요소에 대해서 z-index 속성을 지정하여 적절한 레이어 순서를 결정합니다. 첫 번째 이미지는 가장 위에 위치하고, 다음 이미지부터는 순차적으로 아래쪽에 위치하도록 지정됩니다.
<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; //이미지 변경 간격 시간
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[0].style.opacity = "1"; //첫번째 이미지를 보이게
</script>이미지 슬라이더는 HTML과 CSS로 이미지를 렌더링하고, 자바스크립트로 이미지를 전환하고 있습니다.
선택자를 사용하여 slider__wrap, slider__img, slider를 변수로 저장합니다.
currentIndex 변수를 사용하여 현재 보이는 이미지를 추적합니다.
sliderCount 변수를 사용하여 이미지의 총 개수를 추적합니다.
sliderInterval 변수를 사용하여 이미지 전환 간격 시간을 설정합니다.
setInterval 메서드를 사용하여 일정한 간격으로 이미지를 전환합니다.
currentIndex 변수를 사용하여 현재 보이는 이미지의 투명도를 0으로 설정하고, nextIndex 변수를 사용하여 다음 이미지의 투명도를 1로 설정합니다.
currentIndex 변수를 nextIndex 변수로 설정합니다.
위의 코드에서는 이미지를 전환하는 방법으로 CSS의 opacity 속성을 사용하고 있습니다. opacity 속성은 0에서 1로 바뀌면서 이미지가 서서히 나타나게 됩니다.