728x90
🎞 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴)
📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직이는 동시에 밑에 닷메뉴도 이동하는 슬라이드를 만들어봅시다!
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) 효과 완성⭐️
HTML
코드 보기를 펼쳐 봐주세요 :)
헤더 부분은 이전 것과 동일하여 메인부분만 넣었습니다!
코드 보기
<main id="main">
<section id="sliderType01">
<div class="slider__wrap">
<div class="slider__img">
<div class="slider__inner">
<div class="slider" role="group" aria-label="1/5"><img src="../assets/img/effect_bg02.jpg" alt="이미지1"></div>
<div class="slider" role="group" aria-label="2/5"><img src="../assets/img/effect_bg06.jpg" alt="이미지2"></div>
<div class="slider" role="group" aria-label="3/5"><img src="../assets/img/effect_bg07.jpg" alt="이미지3"></div>
<div class="slider" role="group" aria-label="4/5"><img src="../assets/img/effect_bg018.jpg" alt="이미지4"></div>
<div class="slider" role="group" aria-label="5/5"><img src="../assets/img/effect_bg05.jpg" alt="이미지5"></div>
</div>
</div>
<div class="slider__btn">
<a href="#" class="prev" role="button" aria-label="왼쪽 이미지">prev</a>
<a href="#" class="next" role="button" aria-label="오른쪽 이미지">next</a>
</div>
<div class="slider__dot">
<!-- <a href="#" class="dot active">이미지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>
</section>
</main>
CSS
부분적인 CSS입니다.
전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요!
코드 보기
/* slider */
.slider__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* slider__img : 이미지 보이는 영역*/
.slider__img {
position: relative;
width: 800px;
height: 450px;
/* 나머지 이미지 가리기 */
overflow: hidden;
}
/* slide__inner : 이미지를 감싸고 있는 부모 : 움직이는 부분 */
.slider__inner {
display: flex;
flex-wrap: wrap;
width: 4800px; /*위에를 써주고 이걸 써주어야 가로로 정렬됨 , 첫이미지 복사했으니까 기존 4000에서 4800으로 변경해주어야함*/
height: 450px;
/* position: relative; 제이쿼리 썼을 때 이미지 넘겨지게 설정->제이쿼리에서 따로 설정해줌 */
}
/* slider : 개별적인 이미지 */
.slider {
position: relative;
width: 800px;
height: 450px;
}
.slider::before {
position:absolute;
left: 5px;
top: 5px;
background: rgba(0, 0, 0, 0.4);
color:#fff;
padding: 5px 10px;
}
/* z-index 필요없음 */
.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(6)::before {content: '이미지1';}
@media (max-width: 800px){
.slider__img {
width: 400px;
height: 250px;
}
}
.slider__btn a {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.4);
text-align: center;
line-height: 50px;
transition: all 0.2s;
display: block;
color: #fff;
}
.slider__btn a:hover {
background: rgba(240, 31, 251, 0.4);
border-radius: 50%;
color: #000;
}
.slider__btn a.prev {
left: 0;
}
.slider__btn a.next {
right: 0;
}
.slider__dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
}
slider__dot .dot {
width: 20px;
height: 20px;
background: rgba(0,0,0,0.4);
display: inline-block;
border-radius: 50%;
/* 들여쓰기 */
text-indent: -9999px;
transition: all 0.3s;
margin: 2px;
}
.slider__dot .dot.active {
background: rgba(255,255,255,0.9);
}
Javascript
자바스크립트를 통해 prev버튼을 눌렀을 때 이전으로,
next버튼을 눌렀을 때 다음으로 가게 해주어야 합니다.
동시에 dot버튼도 이동하게끔 만들어주어야 합니다.
설명은 주석을 참고해주세요!
코드 보기
const sliderWrap = document.querySelector(".slider__wrap")
const sliderImg = document.querySelector(".slider__img") //보여지는 영역
const sliderInner = document.querySelector(".slider__inner") //움직이는 영역
const slider = document.querySelectorAll(".slider") //이미지
const sliderDot = document.querySelector(".slider__dot"); //닷메뉴
let currentIndex = 0; //현재 이미지
let sliderCount = slider.length; //이미지 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로값
let dotIndex ="";
// 초기값 설정
function init(){
slider.forEach(() => dotIndex +="<a href='#' class='dot'>이미지1</a>");
sliderDot.innerHTML = dotIndex;
// 첫 번째 닷 버튼한테 활성화 표시
sliderDot.firstChild.classList.add("active");
// = (비슷)sliderDot.firstElementChild.classList.add("active");
}
init();
// 이미지 이동
function gotoSlider(num){
// 사진 움직이게 하기
sliderInner.style.transition = "all 400ms"
// 왼쪽으로 가야하니깐 -
sliderInner.style.transform = "translateX("+ -sliderWidth * num +"px)";
currentIndex = num;
// 두번째 이미지 ==> 두번째 닷 클래스 추가
// 1. 닷 메뉴 클래스 모두 삭제
// 2. 해당 이미지 해당 닷 메뉴 클래스 추가
let slideDotActive = document.querySelectorAll(".slider__dot .dot");
// 전체 닷메뉴
slideDotActive.forEach(el => el.classList.remove("active"));
slideDotActive[num].classList.add("active");
// // 해당 닷 클릭시 해당 이미지로 가게끔
// slideDotActive[num].addEventListener("click", () => {
// gotoSlider()
// })
}
// 버튼 클릭했을 때
document.querySelectorAll(".slider__btn a").forEach((btn, index) => {
btn.addEventListener("click", () => {
// 이전: 현재 인데스에서 전체 슬라이드 카운트에서 -1
let prevIndex = (currentIndex + (sliderCount - 1)) % sliderCount;
let nextIndex = (currentIndex + 1) % sliderCount;
if(btn.classList.contains("prev")){
gotoSlider(prevIndex);
} else {
gotoSlider(nextIndex);
}
});
})
// 닷 버튼 클릭했을 때
document.querySelectorAll(".slider__dot .dot").forEach((dot, index) => {
dot.addEventListener("click", () => {
gotoSlider(index);
})
});
'Effect(자바스크립트 활용) > Slider Effect 슬라이드이펙트' 카테고리의 다른 글
| "슬라이더이펙트 07" : 이미지 슬라이드((버튼, 닷메뉴, 플레이 버튼, 정지 버튼, 자동 플레이) (2) | 2022.10.21 |
|---|---|
| "슬라이더이펙트 06" : 이미지 슬라이드(버튼, 닷메뉴, 무한) (1) | 2022.10.21 |
| "슬라이더이펙트 04" : 좌우로 움직이기(버튼을 이용하여) (11) | 2022.09.19 |
| "슬라이더이펙트 03" : 좌로 움직이기(연속) (2) | 2022.09.02 |
| "슬라이더이펙트 02" : 좌로 움직이기 (3) | 2022.08.30 |
댓글