메인슬라이드 관련 질문 드립니다.
본문
안녕하세요
이번에 장애인기능경기대회에 참가하게 되어서 하다보니 질문이 있어서요
일단 자바스크립트로 메인 슬라이더를 만들어야 하는데요
아래 코드처럼 일단 자동으로 3초 간격으로 페이드 되게 처리는 하였습니다.
그런데 아래 스크립트 코드에 prev 버튼과 next 버튼은 어떻게 구현을 해야할지 잘 몰라서요
혹시 죄송한데요
스크립트 코드좀 알려 주실 수 있으실까요
쉽게 왜울 수 있게 아래 스크립트 참고 해서 했으면 합니다.
또한 각각의 슬라이더에 혹시 텍스트 에니메이션은 어어떻게 주는 건가요
해보니깐 이게 처음에는 적용이 되고 그리고 다음 이미지 나왔을 때 그때도 텍스트가 에니메이션 되면서 나와야 하는데 나오지 않더라구요
죄송합니다. 괜히 이런걸 부탁 드리게 되어서요
<style>
#banner { }
#banner .slidelist { display: flex; align-items: center; justify-content: center; }
#banner .slidelist .slideimg { position: relative; width: 1920px; height: 550px; }
#banner .slidelist .slideimg .slide { position: absolute; top: 0; left: 0; }
#banner .slidelist .slideimg .slide img { width: 100%; height: 550px; display: block; }
#banner .slidelist .slideimg .slide:nth-child(1) { z-index: 3; }
#banner .slidelist .slideimg .slide:nth-child(2) { z-index: 2; }
#banner .slidelist .slideimg .slide:nth-child(3) { z-index: 1; }
</style>
<section id="banner">
<div class="slidelist">
<div class="slideimg">
<div class="slide"><img src="/img/mainslide01.jpg" alt="메인슬라이드 01"></div>
<div class="slide"><img src="/img/mainslide02.jpg" alt="메인슬라이드 02"></div>
<div class="slide"><img src="/img/mainslide03.jpg" alt="메인슬라이드 03"></div>
</div>
</div>
</section>
<script>
//메인슬라이드
const slidelist = document.querySelector(".slidelist");
const slideimg = document.querySelector(".slideimg");
const slide = document.querySelectorAll(".slide");
let currentindex = 0;
let slidecount = slide.length;
setInterval(function(){
let nextindex = (currentindex + 1) % slidecount;
slide[currentindex].style.opacity = "0";
slide[nextindex].style.opacity = "1";
slide.forEach(slide => {
slide.style.transition = "all 2.8s";
});
currentindex = nextindex;
},3000);
</script>
답변 1
<style>
#banner { }
#banner .slidelist { display: flex; align-items: center; justify-content: center; }
#banner .slidelist .slideimg { position: relative; width: 1920px; height: 550px; }
#banner .slidelist .slideimg .slide { position: absolute; top: 0; left: 0; }
#banner .slidelist .slideimg .slide img { width: 100%; height: 550px; display: block; }
#banner .slidelist .slideimg .slide:nth-child(1) { z-index: 3; }
#banner .slidelist .slideimg .slide:nth-child(2) { z-index: 2; }
#banner .slidelist .slideimg .slide:nth-child(3) { z-index: 1; }
</style>
<section id="banner">
<div class="slidebtn">
<button id="btn_prev">prev</button>
<button id="btn_next">next</button>
</div>
<div class="slidelist">
<div class="slideimg">
<div class="slide"><img src="/img/mainslide01.jpg" alt="메인슬라이드 01"></div>
<div class="slide"><img src="/img/mainslide02.jpg" alt="메인슬라이드 02"></div>
<div class="slide"><img src="/img/mainslide03.jpg" alt="메인슬라이드 03"></div>
</div>
</div>
</section>
<script>
const interval = 3000;
const directions = { PREV: -1, NEXT: 1 };
const btn_prev = document.getElementById('btn_prev');
const btn_next = document.getElementById('btn_next');
//메인슬라이드
const slidelist = document.querySelector(".slidelist");
const slideimg = document.querySelector(".slideimg");
const slide = document.querySelectorAll(".slide");
let currentindex = 0;
let slidecount = slide.length;
let timer = null;
slide.forEach(slide_each => {
slide_each.style.transition = "all 2.8s";
});
function trans(dir = directions.NEXT) {
let nextindex = (currentindex + 1) % slidecount;
if (dir == directions.PREV) {
nextindex = (currentindex - 1 + slidecount) % slidecount;
}
slide[currentindex].style.opacity = "0";
slide[nextindex].style.opacity = "1";
// slide.forEach(slide => {
// slide.style.transition = "all 2.8s";
// });
currentindex = nextindex;
transitionEnd();
transitionStart(dir);
}
function transitionStart(dir = directions.NEXT, t = interval) {
timer = setTimeout(function () { trans(dir); }, t);
}
function transitionEnd() {
clearTimeout(timer);
}
btn_prev.addEventListener('click', function () {
transitionEnd();
transitionStart(directions.PREV, 1);
}, false);
btn_next.addEventListener('click', function () {
transitionEnd();
transitionStart(directions.NEXT, 1);
}, false);
// setInterval(trans, interval);
transitionStart(directions.NEXT, interval);
</script>
텍스트 에니메이션은 어떻게 주냐는 질문은 좀 추상적이어서
뭘 말하는지 잘 모르겠습니다.
우와! 정말 감사 드립니다.
꼭 우승해서 돌아오도록 하겠습니다.
다시 한번 정말로 감사 드립니다.
아 참 텍스트 에니메이션 같은 경우에는요
https://daontheme1.cafe24.com/index.php?theme=daontheme_simple07
위 사이트에 보시면 메인슬라이더 부분에 보면 텍스트가 나오는데 각각의 슬라이더 마다 텍스트가 나오게 하고 싶은 거에요
그래서 이것을 자바스크립트로 처리를 해야 할지 아님 css로 처리를 하면 되는 것인지 궁금 합니다.
정말 죄송한데 이것도 한번만 더 부탁 드려도 될까요 ㅠㅠㅠㅠㅠㅠ 정말 죄송합니다
답변을 작성하시기 전에 로그인 해주세요.
