테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

메인슬라이드 관련 질문 드립니다. 채택완료

꿈의세계 3년 전 조회 2,322
답변 1
목록

안녕하세요

이번에 장애인기능경기대회에 참가하게 되어서 하다보니 질문이 있어서요

일단 자바스크립트로 메인 슬라이더를 만들어야 하는데요

아래 코드처럼 일단 자동으로 3초 간격으로 페이드 되게 처리는 하였습니다.

그런데 아래 스크립트 코드에 prev 버튼과 next 버튼은 어떻게 구현을 해야할지 잘 몰라서요

혹시 죄송한데요 

스크립트 코드좀 알려 주실 수 있으실까요

쉽게 왜울 수 있게 아래 스크립트 참고 해서 했으면 합니다.

 

또한 각각의 슬라이더에 혹시 텍스트 에니메이션은 어어떻게 주는 건가요

해보니깐 이게 처음에는 적용이 되고 그리고 다음 이미지 나왔을 때 그때도 텍스트가 에니메이션 되면서 나와야 하는데 나오지 않더라구요

죄송합니다. 괜히 이런걸 부탁 드리게 되어서요   

</strong></p>

<p><style></p>

<p>#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; }</p>

<p></style></p>

<p><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></p>

<p><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></p>

<p><strong>
 

#메인슬라이더
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
배
배르만
3년 전

</p>

<p><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');</p>

<p>    //메인슬라이드

    const slidelist = document.querySelector(".slidelist");

    const slideimg = document.querySelector(".slideimg");

    const slide = document.querySelectorAll(".slide");

    

    let currentindex = 0;

    let slidecount = slide.length;</p>

<p>    let timer = null;

    slide.forEach(slide_each => {

        slide_each.style.transition = "all 2.8s";

    });</p>

<p>    function trans(dir = directions.NEXT) {

        let nextindex = (currentindex + 1) % slidecount;

        if (dir == directions.PREV) {

            nextindex = (currentindex - 1 + slidecount) % slidecount;

        }</p>

<p>        slide[currentindex].style.opacity = "0";

        slide[nextindex].style.opacity = "1";

        // slide.forEach(slide => {

        //     slide.style.transition = "all 2.8s";

        // });

        currentindex = nextindex;</p>

<p>        transitionEnd();

        transitionStart(dir);

    }</p>

<p>    function transitionStart(dir = directions.NEXT, t = interval) {

        timer = setTimeout(function () { trans(dir); }, t);

    }

    function transitionEnd() {

        clearTimeout(timer);

    }</p>

<p>    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></p>

<p>

 

텍스트 에니메이션은 어떻게 주냐는 질문은 좀 추상적이어서

뭘 말하는지 잘 모르겠습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

�
꿈의세계
3년 전
우와! 정말 감사 드립니다.
꼭 우승해서 돌아오도록 하겠습니다.
다시 한번 정말로 감사 드립니다.
�
꿈의세계
3년 전
아 참 텍스트 에니메이션 같은 경우에는요
https://daontheme1.cafe24.com/index.php?theme=daontheme_simple07
위 사이트에 보시면 메인슬라이더 부분에 보면 텍스트가 나오는데 각각의 슬라이더 마다 텍스트가 나오게 하고 싶은 거에요
그래서 이것을 자바스크립트로 처리를 해야 할지 아님 css로 처리를 하면 되는 것인지 궁금 합니다.
정말 죄송한데 이것도 한번만 더 부탁 드려도 될까요 ㅠㅠㅠㅠㅠㅠ 정말 죄송합니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인