“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
슬라이드 이펙트06 -버튼과 닷메뉴를 사용해서 슬라이드를 움직여보기!
이번 슬라이드 이펙트는 버튼과 닷메뉴를 사용해서 슬라이드 왼쪽으로 움직여 볼 수 있도록 하겠습니다.
<슬라이드 이펙트 06 - 완성본>
HTML&CSS
<!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">
<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;
}
/* 이미지 움직이는 영역 4800=총 이미지 */
.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;
background-color: #fff;
line-height: 50px;
text-align: center;
transition: all 0.2s ease;
}
.slider__btn a:hover {
border-radius: 50%;
color: #fff;
}
.slider__btn a.prev {
left: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.slider__btn a.next {
right: 0;
background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.slider__dot {
position: absolute;
left: 50%;
bottom: 50px;
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: 3px;
}
.slider__dot .dot.active {
background-color: rgba(255, 255, 255, 1);
}
</style>
</head>
<!-- //header -->
<body class="img06 bg06 font06">
<header id="header">
<h1>Javascript sliderEffect06</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>
<li><a href="sliderEffect07.html">7</a></li>
</ul>
</header>
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="./img/sliderEffect03-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect05-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect07-min.jpg" alt="이미지3"></div>
<div class="slider s4"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
<div class="slider s5"><img src="./img/sliderEffect01-min.jpg" alt="이미지5"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev" title="이전이미지"></a>
<a href="#" class="next" title="다음이미지"></a>
</div>
<div class="slider__dot">
<!-- <a href="#" class="active dot">이미지1</a>
<a href="#" class="dot">이미지2</a>
<a href="#" class="dot">이미지3</a>
<a href="#" class="dot">이미지4</a>
<a href="#" class="dot">이미지5</a> -->
</div>
</div>
</main>
<!-- //main -->HTML& CSS
- HTML구조에서 slider__btn 과 slider__dot을 추가해 줍니다.
- slider__btn안에 prev이전이미지와 next다음이미지로 넘어갈 수 있도록 구조를 만들어 줍니다.
- CSS로 넘어와서 btn과 dot에 필요한 속성들을 부여해서 btn은 양 사이드 가운데로 올 수 있으며 클릭할 때 바뀔 수 있도록 설정해 줍니다.
- dot은 동그랗게 만들어 준 후 가운데로 올 수 있도록 속성을 부여해줍니다.
- 이 때 footer는 따로 만들어 주지 않습니다.
Javascript
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //보여지는 영역
const slider = sliderWrap.querySelectorAll(".slider"); //개별 이미지
const sliderInner = sliderWrap.querySelector(".slider__inner"); //움직이는 영역
const sliderDot = sliderWrap.querySelector(".slider__dot"); //닷메뉴
const sliderBtn = sliderWrap.querySelectorAll(".slider__btn a"); //버튼
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderWidth = slider[0].offsetWidth //이미지 가로 값
let sliderInterval = 3000; //이미지 변경 간격 시간
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 sliderCount = slider.length; //전체 이미지 갯수
let prevIndex = (currentIndex + (sliderCount-1))% sliderCount; //0, 4, 3, 2, 1, 0, 4, 3, 2, 1
let nextIndex = (currentIndex + 1) % sliderCount; //1, 2, 3, 4, 0, 1 ,2
if (btn.classList.contains("prev")){ //contains확인 할 수 있다.
gotoSlider(prevIndex);
} else {
gotoSlider(nextIndex);
}
});
});
//닷 클릭 이벤트
let dotClick = document.querySelectorAll(".slider__dot .dot")
dotClick.forEach((dot, index)=>{
dot.addEventListener("click", () => {
gotoSlider(index);
})
})
</script>javascript
- 5번에서 선택한 선택자와 변수들은 그대로 가져와 설정해줍니다.
- function init() 함수를 설정해서 이미지 갯수 만큼 닷 메뉴를 생성해 줍니다. 이 때 먼저 선택자에 dotIndex를 설정 해 준 후 slider안에 이미지가 있으니 slider에 다중으로 이미지가 들어있으니 forEach문을 통해서 dotIndex 를 이미지의 갯수만큼 +증가 시켜 준 후 SliderDot을 innerHTML 로 dotIndx값으로 불러와줍니다.
- 첫번째 닷 메뉴한테 활성화를 표시하기 위해 sliderDot의 자식요소를 선택해 주어야 하므로 fistChild.classList에 active를 사용해서 활성화 표시를 해줍니다.
- 그리고 버튼을 클릭했을 때 이미지가 이전으로 가고 다음으로 넘어갈 수 있게 설정을 해줍니다 .먼저 선택자 sliderBtn을 forEach문을 통해서 btn안에 요소가 들어있으므로 요소 자리에 btn을 적어주고 그 후에 index값을 적어줍니다. 그리고 버튼을 클릭했을 때 이벤트가 발생하 수 있도록 btn에 addEventListner를 써줍니다.
- 변수 sliderCount = silder.length; 슬라이더 카운터는 슬라이더 갯수 값을 변수로 설정해 준후
- 전으로 가기 위해서 인덱스 값이 0,4,3,2,1,0,4...로 넘어가므로 슬라이드 인덱스 값에서 슬라이더 갯수에서 하나를 뺀값을 슬라이더 갯수로 나눈 값으로 설정 해주고
- 다음으로 가는 값은 1,2,3,4,0,1,2,3,4...로 넘어가므로 슬라이드 인덱스 값에서 +1씩 증가 시키고 슬라이드 인덱스 값으로 나눈 값을 변수로 설정해 줍니다.
- if문을 사용해서 classList.contains를 사용해서 만약 버튼에 prev를 포함하고 있다면 슬라이드가 prevIndex로 이동할 것이고
- 그렇지 않는다면 nextIndex값으로 이동하는 것을 선언해 줍니다.
- 그리고 마지막으로 닷을 클릭했을 때도 그 위치에 맞게끔 이미지가 이동해야 하는데 버튼을 클릭했을 때와 비슷한 형식으로 먼저 변수를 dotClick을 이름으로 선택자를 선택해 준 후 forEach()문을 통해서 dotClick의 요소가 dot이므로 요소의 위치에 dot을 써주고 index값을 써준 다음에 addEventListner을 사용해서 dot에 클릭을 하면 슬라이드가 인덱스 값과 같게 넘어갈 수 있도록 설정 해 줄 수 있습니다.