728x90
반응형
슬라이드 이펙트 : 화살표 버튼, 닷(dot) 메뉴
수업 시간에 배운 내용을 복습하면서 해보겠습니다.
코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성화면
코드 블럭
<!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>06. 슬라이드 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slider.css">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="ico/favicon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="ico/favicon.png"/>
<link rel="apple-touch-icon" href="ico/favicon.png"/>
<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: 4800px; /* 총 이미지 가로 영역 */
height: 450px;
}
.slider { /* 개별적인 이미지 */
position: relative;
width: 800px;
height: 450px;
}
.slider__btn a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #fff;
transition: all 0.3s ease;
}
.slider__btn a:hover {
border-radius: 50%;
background-color: rgb(139, 255, 113);
color: #fff;
}
.slider__btn a.prev {
left: 0;
}
.slider__btn a.next {
right: 0;
}
.slider__dot {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
}
.slider__dot .dot {
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.3);
display: inline-block;
border-radius: 50%;
text-indent: -9999px;
transition: all 0.3s;
margin: 2px;
}
.slider__dot .dot.active {
background-color: rgba(255, 255, 255, 1);
}
</style>
</head>
<body class="img06 bg06 font06">
<header id="header">
<h1>Javascript slider Effect06</h1>
<p>슬라이드 이펙트 : 이미지 슬라이드(버튼, 닷 메뉴)</p>
<ul>
<li><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 class="active"><a href="sliderEffect06.html">6</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="./img/sliderEffect01-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect02-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect03-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect05-min.jpg" alt="이미지5"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev" title="이전이미지">prev</a>
<a href="#" class="next" title="다음이미지">next</a>
</div>
<div class="slider__dot"></div>
</div>
</main>
<!-- //main -->
</body>
</html>구성
- 코드는 간단하게 header 구역 부분에 제목 태그, 목록 태그를 사용해서 텍스트를 입력해줍니다.
- main 구역에는 이미지 태그를 사용해 각각 이미지를 입력해줍니다.
- css는 유형별로 공통으로 사용될 스타일은 파일로 따로 만들어서 링크 태그를 사용해 가지고 와서 입력해주고 유형별로 다르게 사용될 스타일은 각각의 코드 구성하는데 입력해줍니다.
- 이전과 다르게 화살표 버튼과 닷(dot)메뉴를 HTML 블럭에 태그와 class 명을 사용해서 만들어줍니다.
- style 구역에 가서 화살표 버튼과 닷(dot)메뉴에 태그 명과 class 명을 가져와서 각각의 스타일과 속성을 입력해줍니다.
CSS
- CSS1 참고(https://github.com/dongjin6539/web2023/blob/main/javascript/slider/css/reset.css)
- CSS2 참고 (https://github.com/dongjin6539/web2023/blob/main/javascript/slider/css/slider.css)
JAVASCRIPT
<script>
// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = sliderWrap.querySelector(".slider__inner"); // 움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider"); // 개별 이미지
const sliderDot = sliderWrap.querySelector(".slider__dot"); // 닷 메뉴
const sliderBtn = sliderWrap.querySelectorAll(".slider__btn a"); // 버튼
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 2000; // 이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; // 이미지 가로값
let dotIndex = "";
function init(){
// 이미지 갯수만큼 닷 메뉴 생성
slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지</a>");
sliderDot.innerHTML = dotIndex;
// 첫번째 닷 메뉴한테 활성화 표시하기
sliderDot.firstChild.classList.add("active");
};
init();
// 이미지 이동시키기
function gotoSlider(num){
sliderInner.style.transition = "all 400ms";
sliderInner.style.transform = "translateX(" + -sliderWidth * num + "px)";
currentIndex = num;
// 닷 메뉴 활성화하기
let dotActive = document.querySelectorAll(".slider__dot .dot");
dotActive.forEach((active) => active.classList.remove("active"));
dotActive[num].classList.add("active");
}
// 버튼을 클릭했을 때
sliderBtn.forEach((btn, index) => {
btn.addEventListener("click", () => {
let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount;
let nextIndex = (currentIndex + 1) % sliderCount;
if(btn.classList.contains("prev")){
gotoSlider(prevIndex);
} else {
gotoSlider(nextIndex);
}
});
});
// 닷 메뉴 클릭했을 때 이미지 이동시키기
const dotActive = document.querySelectorAll(".slider__dot .dot");
dotActive.forEach((dot, index) => {
dot.addEventListener("click", () => {
gotoSlider(index);
});
});
</script>자바스크립트 구성
- 각각 필요한 부분의 태그를 선택자로 만들어줍니다.
- 변수를 추가로 저장해줍니다. 현재 보이는 이미지를 currentIndex로 0을 저장해주고, 이미지의 갯수는 sliderCount로 이미지 부부분을 선택자로 만들어둔 slider를 사용해서 slider.length를 저장해주고, 이미지 변경 경과 시간을 sliderInterval로 2000(2초)를 저장해주고, 이미지의 가로값을 sliderWidth로 slider[0].offsetWidth로 값을 저장해줍니다.
- 먼저 //이미지 이동시키기 함수 gotoSlider을 만들고 매개변수 num을 만들어줍니다.
- 다음 //버튼을 클릭했을 때 함수를 만들어줍니다. 버튼이 2개로 다중이이므로 forEach( )를 사용해줍니다. 버튼의 값을 btn으로 줘서 addEventListener("click") 메서드를 입력해서 버튼을 클릭했을 때의 효과를 입력해줍니다. 클릭을 했을 때 이미지가 변해야 하므로 변수를 각각 prevIndex, nextIndex를 만들어줍니다.
- 변수 prevIndex, nextIndex의 값이 변수 prevIndex는 4,3,2,1,0 순으로 나와야하고 변수 nextIndex는 1,2,3,4 순으로 나와야합니다. 나와야 하는 값의 식을 입력해줍니다.
- 그리고 if문을 줘서 버튼을 클릭했을 때 버튼에 class명이 prev가 있으면 //이미지 이동시키기 함수 gotoSlider의 매개변수에 값이 들어가도록 gotoSlider(prevIndex)를 주고 class명이 prev이 없으면 gotoSlider(nextIndex)를 줘서 매개변수에 값이 들어가도록 해줍니다.
- //이미지 이동시키기 함수 gotoSlider로 가서 이동하는 효과 transform에 속성을 입력해주고 부드럽게 움직이게 하기 위해 transition 효과를 입력해줍니다. 그리고 계속 움직이게 해서 현재 보이는 이미지 currentIndex의 값을 num으로 저장해줍니다.
- 다음 이미지 갯수만큼 닷(dot) 메뉴를 만들어줄겁니다. 함수 init를 만들어서 이미지의 갯수를 가져와야하니까 선택자 slider를 가져와서 다중이이므로 forEach( )를 써서 만들어준 변수 dotIndex에 +=를 사용해서 dot태그를 저장해주고, 닷(dot) 메뉴 입력할 위치의 선택자 sliderDot에 .innerHTML를 써서 입력해줍니다.
- 다음 예시로 첫번째 닷(dot) 메뉴에 활성화 시키주기 위해 sliderDot.firstChild.classList.add("active");를 입력해줍니다.
- 이미지를 이동시킬 때 닷(dot) 메뉴도 같이 이미지의 위치에 맞게 활성화를 시켜주려고 합니다. 닷(dot) 메뉴에 선택자 dotActive를 만들고 먼저 dotActive에 classList.remove("active");를 사용해서 active 스타일 효과를 지워주고, 이미지의 위치를 나타내는 num를 가져와서 dotActive[num].classList.add("active");를 사용해서 active 스타일 효과를 입력해줍니다.
- 추가로 //닷 메뉴를 클릭했을 때 이미지 이동시키는 스크립트를 만드려고 합니다. 닷(dot) 메뉴에 선택자 dotActive를 만들고 forEach( )를 사용해서 값을 dot, 인덱스 값을 index로 입력해줍니다. 닷 메뉴를 클릭했을 때는 dot.addEventListener("click")를 사용해줍니다. 클릭했을 때 이미지를 이동해야하기 때문에 //이미지 이동시키기 함수 gotoSlider에 매개변수 index를 입력시켜줍니다. index값은 이미지 갯수와 동일하게 0,1,2,3,4이므로 활성화됩니다.
728x90
반응형
