홈페이지

CSS와 jQuery를 사용한 좌우로 움직이는 슬라이드쇼 - 3개씩 이미지 캐러셀 형태

초코몽몽 2025. 3. 5. 13:51
728x90

이미지 3개씩 좌우로 움직이는 슬라이드쇼를 css랑 제이쿼리 사용해서 만들어줘.

CSS와 jQuery를 사용한 좌우로 움직이는 슬라이드쇼 코드를 제공해드리겠습니다. 3개씩 이미지가 표시되는 캐러셀 형태로 구현하겠습니다.
 
 
<!DOCTYPE html>
<html>
<head>
    <title>3 Images Infinite Slideshow</title>
    <style>
        .slideshow-container {
            max-width: 1200px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .slides-wrapper {
            display: flex;
            transition: transform 0.5s ease;
        }

        .slide-group {
            flex: 0 0 100%;
            display: flex;
            justify-content: space-between;
            min-width: 100%;
        }

        .slide {
            width: 32%;
            padding: 10px;
            box-sizing: border-box;
        }

        .slide img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            padding: 10px;
            cursor: pointer;
            background: rgba(0,0,0,0.5);
            color: white;
        }

        .prev { left: 0; }
        .next { right: 0; }
    </style>
</head>
<body>
    <div class="slideshow-container">
        <div class="slides-wrapper">
            <!-- 첫 번째 그룹 -->
            <div class="slide-group">
                <div class="slide"><img src="https://via.placeholder.com/400x200?text=Image+1" alt="Image 1"></div>
                <div class="slide"><img src="https://via.placeholder.com/400x200?text=Image+2" alt="Image 2"></div>
                <div class="slide"><img src="https://via.placeholder.com/400x200?text=Image+3" alt="Image 3"></div>
            </div>
            <!-- 두 번째 그룹 -->
            <div class="slide-group">
                <div class="slide"><img src="https://via.placeholder.com/400x200?text=Image+4" alt="Image 4"></div>
                <div class="slide"><img src="https://via.placeholder.com/400x200?text=Image+5" alt="Image 5"></div>
                <div class="slide"><img src="https://via.placeholder.com/400x200?text=Image+6" alt="Image 6"></div>
            </div>
        </div>
        <div class="prev">❮</div>
        <div class="next">❯</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $slidesWrapper = $('.slides-wrapper');
            var $slideGroups = $('.slide-group');
            var slideCount = $slideGroups.length;
            var slideWidth = $('.slideshow-container').width();
            var currentIndex = 0;
            var autoPlayInterval;

            // 슬라이드 복제
            var $firstClone = $slideGroups.first().clone();
            var $lastClone = $slideGroups.last().clone();
            $slidesWrapper.append($firstClone);
            $slidesWrapper.prepend($lastClone);

            // 모든 슬라이드 갱신
            var $allSlides = $('.slide-group');
            var totalSlides = $allSlides.length;

            // 초기 위치 설정 (첫 번째 실제 슬라이드)
            $slidesWrapper.css('transform', 'translateX(' + (-slideWidth) + 'px)');

            function updateSlidePosition(animate) {
                var newPosition = -currentIndex * slideWidth;
                if (!animate) {
                    $slidesWrapper.css('transition', 'none');
                }
                $slidesWrapper.css('transform', 'translateX(' + newPosition + 'px)');
                if (!animate) {
                    setTimeout(function() {
                        $slidesWrapper.css('transition', 'transform 0.5s ease');
                    }, 50);
                }
            }

            function moveToNextSlide() {
                currentIndex++;
                updateSlidePosition(true);
                
                if (currentIndex >= slideCount) {
                    setTimeout(function() {
                        currentIndex = 0;
                        updateSlidePosition(false);
                    }, 500);
                }
            }

            function moveToPrevSlide() {
                currentIndex--;
                updateSlidePosition(true);
                
                if (currentIndex < 0) {
                    setTimeout(function() {
                        currentIndex = slideCount - 1;
                        updateSlidePosition(false);
                    }, 500);
                }
            }

            // 자동 재생
            function startAutoPlay() {
                autoPlayInterval = setInterval(moveToNextSlide, 3000);
            }

            function stopAutoPlay() {
                clearInterval(autoPlayInterval);
            }

            $('.next').click(function() {
                stopAutoPlay();
                moveToNextSlide();
                startAutoPlay();
            });

            $('.prev').click(function() {
                stopAutoPlay();
                moveToPrevSlide();
                startAutoPlay();
            });

            // 호버 컨트롤
            $('.slideshow-container').hover(
                function() { stopAutoPlay(); },
                function() { startAutoPlay(); }
            );

            // 윈도우 리사이즈
            $(window).resize(function() {
                slideWidth = $('.slideshow-container').width();
                updateSlidePosition(false);
            });

            // 초기 시작
            startAutoPlay();
        });
    </script>
</body>
</html>

 

 

https://link.coupang.com/a/chGRAa

 

Do it! 자바스크립트 + 제이쿼리 입문:155개 예제로 기본 잡고 반응형 웹부터 실무 활용 플러그인까

쿠팡에서 Do it! 자바스크립트 + 제이쿼리 입문:155개 예제로 기본 잡고 반응형 웹부터 실무 활용 플러그인까지 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 HTML/CSS 제품도 바로 쿠팡에

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."