다른 명언
728x90
반응형
<!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;
}
.slider__inner { /* 이미지 움직이는 영역 */
display: flex;
flex-wrap: wrap;
width: 4800px; /* 총 이미지 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: #ffef0d;
transition: all 0.3s ease;
}
.slider__btn a:hover {
border-radius: 50%;
background-color: #c92d2d;
color: #fff;
}
.slider__btn a.prev {
left: 0;
}
.slider__btn a.next {
right: 0;
}
.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: 2px;
}
.slider__dot .dot.active {
background-color: rgba(255, 255, 255, 1);
}
</style>
</head>
<body class="img07 bg01 font07">
<header id="header">
<h1>Javascript Slider Effect04</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>
<!-- //header -->
<main id="main">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider s1"><img src="./img/sliderEffect06-min.jpg" alt="이미지1"></div>
<div class="slider s2"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
<div class="slider s3"><img src="./img/sliderEffect08-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/sliderEffect10-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">
<!-- <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 -->
</body>
</html>다음 슬라이드로 넘어가기 위한 버튼을 만들고 이미지 밑부분에 닷 메뉴 버튼을 추가였습니다.
<script>
//선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.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 sliderInterval = 3000; //이미지 변경되는 시간&간격
let sliderCount = slider.length; //전체 이미지 갯수
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")
//닷 버튼을 클릭 했을 때 이미지 이동
let sliderdotNodes = sliderWrap.querySelectorAll(".slider__dot .dot")
sliderdotNodes.forEach((el, index) => {
sliderdotNodes[index].addEventListener("click", () => {
gotoSlider(index)
})
})
}
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; //1 2 3 4 0 1 2 3 4
if(btn.classList.contains("prev")){
gotoSlider(prevIndex);
} else {
gotoSlider(nextIndex);
}
});
});
</script>닷 메뉴와 양 옆 슬라이드로 움직이기 위한 버튼을 선택자로 추가 하였습니다.
slider.forEach(() => dotIndex += "<a href='#' class='dot'>이미지</a>");는 slider 배열의 이미지 갯수만큼 .dot 클래스를 가진 a 태그를 생성하고 dotIndex 변수에 추가합니다.
sliderDot.firstChild.classList.add("active") 는 .slider__dot 클래스를 가진 요소의 첫 번째 자식인 a 태그 중에서 첫 번째 이미지의 닷 메뉴가 활성화되도록 합니다.
sliderdotNodes라는 변수를 만들어 갯수가 5개인 slider__dot 클래스의 dot을 불러줍니다.
변수 siderdotNodes의 배열을 부르기 위해 for Each()문을 이용합니다.
배열의 키값을 불러와야 되므로 index를 배열로 부르고 클릭이벤트가 발생했을 때 이미지가 같이 움직이도록 함수 gotoSlider와 동시에 실행되도록 합니다.
닷 메뉴가 활성화 되면 이미지가 이에 맞게 변함을 확인할 수 있습니다.
이미지를 이동 시키기 위해 gotoslider 함수를 만들고 변수 sliderinner에 스타일로 transition과 transform을 주어 이미지 영역의 width값이 시간차를 두고 움직이도록 하였습니다.
next와 prev 버튼에 효과를 주기 위해 선택자 sliderbtn을 forEch()문으로 나타냈습니다.
클릭 했을 때 이벤트를 주어 next를 눌렀을 때 다음이미지 prev를 눌렀를 때 이전 이미지가 나오도록 설정하였습니다.
728x90