728x90
🎞 슬라이드 이펙트 - 좌우로 움직이기(버튼을 이용하여)
📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직일 수 있게 만들어봅시다!
슬라이드 이펙트 - 좌우로 움직이기(버튼을 이용하여) 효과 완성⭐️
HTML
코드가 굉장히 길어서 코드 보기를 펼쳐 봐주세요 :)
슬라이드에 들어갈 이미지를 넣어준 후 소스보기에 넣어줘야 할 틀을 구성해줍니다.
코드 보기
<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 class="active"><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
<li><a href="sliderEffect06.html">6</a></li>
<li><a href="sliderEffect07.html">7</a></li>
</ul>
</header>
<!-- header -->
<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>
</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;
}
Javascript
자바스크립트를 통해 prev버튼을 눌렀을 때 이전으로,
next버튼을 눌렀을 때 다음으로 가게 해주어야 합니다.
특히, 처음 인덱스로 왔을 때 다시 마지막인덱스로 이어지게 하려면 어떻게 해야하는지가 관건입니다!
코드 보기
const sliderWrap = document.querySelector(".slider__wrap")
const sliderImg = document.querySelector(".slider__img") //보여지는 영역
const sliderInner = document.querySelector(".slider__inner") //움직이는 영역
const slider = document.querySelectorAll(".slider") //각각 이미지
const sliderBtn = document.querySelector(".slider__btn"); //버튼
const sliderBtnPrev = document.querySelector(".prev"); //왼쪽버튼
const sliderBtnNext = document.querySelector(".next"); //오른쪽버튼
let currentIndex = 0; //현재 이미지
let sliderCount = slider.length;//이미지 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로값
//이미지 움직이는 영역
function gotoSlider(num){
sliderInner.style.transition = "all 400ms";
sliderInner.style.transform = "translateX("+ -sliderWidth * num+"px)";
//이걸 안 써주면 currentIndex이 계속 0이므로 계속안가고 한 번 가고 0돼서 멈춤
currentIndex = num;
}
// gotoSlider();
//왼쪽 버튼 클릭했을 때
sliderBtnPrev.addEventListener("click", () => {
//1, 4, 3, 2, 1, 0,
//currentIndex : prev눌렀을 때 가는 페이지 인덱스
let prevIndex = (currentIndex+(sliderCount-1)) % sliderCount; //0, 4, 3, 2, 1, 0, 4...
gotoSlider(prevIndex);
});
//오른쪽 버튼 클릭했을 때
sliderBtnNext.addEventListener("click", () => {
let nextIndex = (currentIndex + 1) % sliderCount //5이미지갯수로 나누기
gotoSlider(nextIndex);
});
'Effect(자바스크립트 활용) > Slider Effect 슬라이드이펙트' 카테고리의 다른 글
| "슬라이더이펙트 06" : 이미지 슬라이드(버튼, 닷메뉴, 무한) (1) | 2022.10.21 |
|---|---|
| "슬라이더이펙트 05" : 이미지 슬라이드(버튼, 닷메뉴) (0) | 2022.10.17 |
| "슬라이더이펙트 03" : 좌로 움직이기(연속) (2) | 2022.09.02 |
| "슬라이더이펙트 02" : 좌로 움직이기 (3) | 2022.08.30 |
| "슬라이더이펙트 01" : 트랜지션 효과 (4) | 2022.08.30 |
댓글