이미지 자동 슬라이드 관련 문의좀 드립니다.

이미지 자동 슬라이드 관련 문의좀 드립니다.

QA

이미지 자동 슬라이드 관련 문의좀 드립니다.

본문

        <div class="slide">

            <img src="../img/logo001.png" alt="이미지 1">

        </div>

        <div class="slide">

            <img src="../img/logo002.png" alt="이미지 2">

        </div>

        <div class="slide">

            <img src="../img/logo003.png"alt="이미지 3">

        </div>

    </div>

    <script>

        let currentSlide = 0;

        const slides = document.querySelectorAll('.slide');

        const slideCount = slides.length;

 

        function showSlide(n) {

            slides.forEach(slide => slide.style.display = 'none');

            slides[n].style.display = 'block';

        }

 

        function nextSlide() {

            currentSlide = (currentSlide + 1) % slideCount;

            showSlide(currentSlide);

        }

 

        function prevSlide() {

            currentSlide = (currentSlide - 1 + slideCount) % slideCount;

            showSlide(currentSlide);

        }

 

        document.addEventListener('DOMContentLoaded', () => {

            showSlide(currentSlide);

            setInterval(nextSlide, 3000); // 3초마다 자동 슬라이드

        });

    </script>

 

 

이 코드를 사용해서 이미지 슬라이드를 사용중인데 이미지가 1줄씩 슬라이드로 나오는데

이미지를 2줄씩 슬라이드 나오게 할려면 어떤부분을 수정해야 할까요? 공부하는 중이라 바쁘실텐데 

알려주시면 복받으실겁니다..!

이 질문에 댓글 쓰기 :

답변 2

아래 처럼 해보세요.

 



<div class="slide">
    <div class="row">
        <img src="../img/logo001.png" alt="이미지 1">
        <img src="../img/logo002.png" alt="이미지 2">
    </div>
    <div class="row">
        <img src="../img/logo003.png" alt="이미지 3">
        <img src="../img/logo004.png" alt="이미지 4">
    </div>
</div>

<script>
    let currentSlide = 0;
    const slides = document.querySelectorAll('.slide');
    const slideCount = slides.length;

    function showSlide(n) {
        slides.forEach(slide => slide.style.display = 'none');
        slides[n].style.display = 'block';
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slideCount;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + slideCount) % slideCount;
        showSlide(currentSlide);
    }

    document.addEventListener('DOMContentLoaded', () => {
        showSlide(currentSlide);
        setInterval(nextSlide, 3000); // 3초마다 자동 슬라이드
    });
</script>

<style>
    .row {
        display: flex;
        justify-content: center;
    }
    .row img {
        margin: 5px;
    }
</style>

답변을 작성하시기 전에 로그인 해주세요.
전체 61,270
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT