swiper - 워드프레스 정보 공유

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper 슬라이드</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <style>
        body { font-family: Arial, sans-serif; }
        .swiper {  height: 300px;}
        .swiper-slide {
            width: 1200px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: white;
            background: #007aff;
        }
        
        ul.swiper-wrapper{
            padding: 0px;
        }
    </style>
</head>
<body>

    <!-- Swiper 컨테이너 -->
    <div class="swiper">
        <ul class="swiper-wrapper">
            <li class="swiper-slide">Slide 1</li>
            <li class="swiper-slide">Slide 2</li>
            <li class="swiper-slide">Slide 3</li>
        </ul>

        <!-- 페이지네이션 -->
        <div class="swiper-pagination"></div>
        <!-- 네비게이션 버튼 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script>
     
        const swiper = new Swiper('.swiper', {
            loop: true, // 무한 루프
            centeredSlides: true,
            autoplay: {
                delay: 3000, // 3초마다 자동 슬라이드
                disableOnInteraction: false, // 유저가 조작해도 자동 슬라이드 계속
            },
            slidesPerView: "auto",
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            spaceBetween: 40,
        });
    </script>

</body>
</html>

터치 이벤트를 수신할 대상 요소입니다. ‘container'(swiper의 터치 이벤트 수신) 또는 ‘wrapper'(swiper-wrapper의 터치 이벤트 수신)일 수 있습니다. 마우스 그랩의 영역을 설정합니다.

touchEventsTarget: 'container',

댓글 달기 댓글 취소