슬라이드 이펙트 - 좌로 움직이기(연속적)
이번에 만들어볼 슬라이더 유형은 버튼을 클릭했을때 움직이고 이미지가 반복되는 형태를 만들어보려고 합니다.
Javascript
CSS를 사용하여 버튼을 만들고 버튼을 클릭하면 사진의 폭 X축으로 이동시켜 다음 사진이 나오도록 하였습니다.
currentIndex라는 변수를 만들어서 0으로 설정하고 움직이는 영역인 sliderInner를 currentIndex가 변화하는 값에 맞춰서
변화할 수 있도록 만들었습니다.
선택자를 sliderBtnPrev, sliderBtnNext로 각각 설정하고 위에서 currentIndex의 값에 맞춰서 이미지가 움직이도록 하였기 떄문에
왼쪽 버튼과 오른쪽 버튼을 클릭 했을떄 이미지가 움직이도록 만들기 위해 메서드를 사용합니다. 또한 처음이미지와 마지막이미지에서
버튼을 클릭하면 각각 처음은 마지막 마지막은 처음으로 움직일 수 있도록 prevIndex, nextIndex 변수를 만들어 실행문에 저장합니다.
실행문에 각각 값을 저장했으면 함수 gotoSlider에 매개변수 num을 지정해서 prevIndex, nextIndex 변수를 가져와서 사용합니다.
이때 currentIndex에 num을 대입했기 때문에 num의 값은 currentIndex와 같다고 볼 수 있습니다.
javascript 보기
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 = num;
}
// 버튼을 클릭했을때
//왼쪽 버튼 클릭
sliderBtnPrev.addEventListener("click", () => {
let prevIndex = (currentIndex + 4) % sliderCount;
gotoSlider(prevIndex);
console.log(currentIndex,sliderCount, prevIndex)
});
//오른쪽 버튼 클릭
sliderBtnNext.addEventListener("click", () => {
let nextIndex = (currentIndex + 1) % sliderCount;
gotoSlider(nextIndex);
//0 1 2 3 4
});
결과
'사이트 제작' 카테고리의 다른 글
| 사이트만들기 - 메인사이트 (4) | 2022.09.14 |
|---|---|
| 사이트제작 - 슬라이드 유형 (4) | 2022.09.05 |
| 사이트제작 - 헤더유형 (3) | 2022.09.05 |
| 사이트 제작 - 푸처유형 (4) | 2022.09.05 |
| 사이트제작 - 베너타입 (1) | 2022.09.05 |
