728x90
반응형
슬라이드 이펙트 6 버튼, 닷메뉴
전체소스 보러가기
.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; /*총이미지4800복사까지*/
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;
border-radius: 5px;
transition: all 0.6s;
}
.slider__btn a:hover {
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.4);
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;
text-indent: -9999px;
transition: all 0.3s;
margin: 2px;
border-radius: 50px;
}
.slider__dot .dot.active {
background-color: rgba(255, 255, 255, 1)
}
</style>
</head>
<body class="img03 bg02 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>
<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/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> <!--접근성을 위해 사이트를 만들때는 title을넣어준다.-->
<a href="#" class="next" title="다음이미지">next</a>
</div>
<div class="slider__dot">
<!-- <a href="#" class="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 -->
전에 했던 슬라이드 방식에서 slider__btn과 slider__dot을 추가해서 버튼과 dot을 만들어 줍니다.하지만 돗은 script에서 생성 할 것이기 때문에 주석처리를 해줍니다.
<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 = 3000; //이미지 변경 간격 시간
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();우선 필요한 선택자들과 변수들을 저장 시켜줍니다. 그후 dotIndex를 가져와 slider의 갯수만큼 반복을 하여 돗에 이미지를 넣어줍니니다. 그후 첫번째 닷메뉴에 acrive의 클라스를 넣어 active의 효화가 생겼는지 확인합니다.
//버튼을 클릭했을 때
sliderBtn.forEach((btn,index) => {
btn.addEventListener("click", () => {
let prevIndex = (currentIndex + (sliderCount-1)) % sliderCount; //432104321043210
let nextIndex = (currentIndex + 1) % sliderCount; //123401234012340
if(btn.classList.contains("prev")){
gotoSlider(prevIndex);
} else {
gotoSlider(nextIndex);
}
});
});다음버튼과 이전버튼을 눌렀을때 화면이 그 방향에 맞게 슬라이드로 움직일수 있게 할수 있는 값을 변수로 저장 하여 그후 조건문으로 이전버튼을 눌렀을때 그버튼이 이전버튼이 맞으면 변수로 저장해 놨던 이전의 값을 goroSlider()안에 넣어 함수를 실행하고 아니면 다음값을 가져와 함수를 실행합니다.
//이미지 이동시키기
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");
};그렇게 가져온 값을 num으로 설정하고 슬라이드의 시간설정과 "translateX("+ -sliderWidth * num +"px)"를 사용하여 슬라이더가 x축으로 어디 까지 움직여야 하는지를 알려주게 해줍니다. 그후 num의 값을 current Ibdex에 저장을해줍니다. 그리고 닷메뉴를 이미지가 보여지는 쪽의 순서로 활성화 되기 위해 변수를 저장하여 .slider__dot .dot을 가져와 active가 있는 클래스를 지워주고 변수안에 있는 num값에 있는 돗에 active를 넣어 활성화 시켜 주었습니다.
//돗버튼 누럿을때 그값 가져오기
let dotClick = document.querySelectorAll(".slider__dot .dot");
dotClick.forEach((active, i) => {
active.addEventListener("click",() =>{
gotoSlider(i);
});
});그리고 돗을 눌렀을때 그 돗의 순서에 있는 이미지로 이동하게 해주기위해 함수 바깥에 또 한번 .slider__dot .dot을 변수로 저장하여 click한 dot의 순서 값을 가져와 그 값으로 gotoSlider(i)를 실행해 주면 돗을 누른 곳에 있는 순서의 이미지로 가게 됩니다.