프론트 슬라이드 공부중인데 도움좀 부탁드려요

Question

.header_img{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; overflow: hidden; } .header_inner{ display: flex; width: 100%; height: 100vh; transition: transform 1s ease; } .slide{ flex:0 0 100%; } .s1{ background-image: url(./img/img.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100vh; } .s2{ background-image: url(./img/img.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100vh; } .s3{ background-image: url(./img/img.png); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 100%; height: 100vh; }const slideContainer = document.querySelector('.header_inner'); const prevBtn = document.querySelector('.img_pr'); const nextBtn = document.querySelector('.img_ne'); const slides = document.querySelectorAll('.slide'); let slideIndex = 0; const moveSlide = (direction) => { slideIndex += direction; if (slideIndex >= slides.length) { slideIndex = 0; } else if (slideIndex < 0) { slideIndex = slides.length - 1; } slideContainer.style.transform = `translateX(-${slideIndex * 100}%)`; }; prevBtn.addEventListener('click', () => moveSlide(-1)); nextBtn.addEventListener('click', () => moveSlide(1));이부분에서 무한루프로 하려고 하는데 자꾸 저는 어떤방식으로 하든 슬라이드 맨끝에서 다음을 누르면 뒤로 돌아서 첫번째 슬라이드로 와요 제가 원하는건 클론슬라이드를 넣어서 다음가기 눌러도 앞으로 계속 가지면서 순서대로 1 2 3 슬라이드가 차례로 계속 나오게 하고싶은건데 ㅠㅠ js를 계속 바꿔봤는데 안되는데 혹시 css 가 문제일까요 ?

쯀 · Answer

안녕하세요~! 연속적으로 흘러가는 슬라이드를 원하시는 거군요!자바스크립트의 cloneNode()를 통해 슬라이드 이미지를 복사할 수 있습니다~해당 관련 슬라이드 효과는 제 블로그에 정리해두었으니 참고해보시면 좋을 것 같습니다 ㅎㅎ 화이팅!https://duektmf34.tistory.com/84

프론트 슬라이드 공부중인데 도움좀 부탁드려요

1개의 답변

Q&A 목록