테스트 사이트 - 개발 중인 베타 버전입니다

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

얌똥이 1년 전 조회 2,386

        <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개

채택된 답변
+20 포인트
무지개22
1년 전

아래 처럼 해보세요.

 

</p>

<pre>
<code><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></code></pre>

<p>

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

답변에 대한 댓글 1개

얌똥이
1년 전
이렇게 하니깐 2줄로 나오기는하는데 슬라이드가 작동을 하는데 어디를 수정해야할까요..?ㅠ

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

이미지 슬라이드는 스와이퍼로 해보세요  swiper

구글링하면 자료들 많구요 

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

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

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

로그인