Kudos
Collect
Twiiter
Facebook
Share
개발의 'ㄱ'자라도 아는 날을 기대하며...

자주 사용하는 Swiper 기본 설정 코드

Essepage Swiper
마지막 업데이트 8일 전
1 0 0 0

Essepage로 홈페이지를 제작할 때, 저는 이미지 슬라이더로 Swiper를 자주 사용하는데요. 주로 사용하는 기본적인 코드를 정리해 보았습니다.

1. SwiperJS 및 TailwindCSS 추가하기

Essepage에서 Swiper를 사용하려면 먼저 태그 안에 SwiperJS 라이브러리를 불러와야 합니다. 저는 TailwindCSS도 자주 사용해서 함께 추가했습니다.

<essepage-head>
    <script src="https://fastly.jsdelivr.net/npm/@tailwindcss/browser@4/dist/index.global.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
</essepage-head>

2. Swiper 슬라이더 HTML 구조

아래는 Swiper를 활용한 이미지 슬라이더의 HTML 코드입니다. 테일윈드로 스타일을 정의했으니, 참고해주세요.

<div class="swiper swiper-slider w-full max-w-xl">
    <div class="swiper-wrapper">
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-red-100 p-4">
                <span class="font-bold text-3xl">1</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-orange-100 p-4">
                <span class="font-bold text-3xl">2</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-yellow-100 p-4">
                <span class="font-bold text-3xl">3</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-green-100 p-4">
                <span class="font-bold text-3xl">4</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-blue-100 p-4">
                <span class="font-bold text-3xl">5</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-indigo-100 p-4">
                <span class="font-bold text-3xl">6</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-purple-100 p-4">
                <span class="font-bold text-3xl">7</span>
            </div>
        </div>
    </div>

    <div class="swiper-button-next !right-2 !w-6 md:!w-8 !h-6 md:!h-8 !flex !items-center !justify-center !rounded-full !border !border-black !bg-white !text-black">
        <svg class="w-4 md:w-5 h-4 md:h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <polyline points="9 6 15 12 9 18"></polyline>
        </svg>
    </div>

    <div class="swiper-button-prev !left-2 !w-6 md:!w-8 !h-6 md:!h-8 !flex !items-center !justify-center !rounded-full !border !border-black !bg-white !text-black">
        <svg class="w-4 md:w-5 h-4 md:h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <polyline points="15 6 9 12 15 18"></polyline>
        </svg>    
    </div>
</div>

3. 버튼 스타일 및 숨김 처리

커스텀 스타일을 적용하기 위해 Swiper의 기본 버튼을 숨기는 CSS를 추가합니다.

.swiper-button-next::after, .swiper-button-prev::after {
    display: none;
}

4. Swiper 실행을 위한 JavaScript 코드

const imageSlider = new Swiper(".swiper-slider", {
    loop: true,
    speed: 1000,
    direction: 'horizontal',
    slidesPerView: 1.2,
    centeredSlides: true,
    spaceBetween: 10,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    breakpoints: {
        900: {
            slidesPerView: 1,
            spaceBetween: 20,
        },
    },
    freeMode: true,
    forceToAxis: true
});

주요 설정 옵션 설명

  1. loop: true
    슬라이드가 마지막까지 도달하면 다시 처음으로 순환(loop)하도록 설정합니다. 무한 루프처럼 계속 슬라이드를 넘길 수 있습니다.

  2. slidesPerView: 1.2
    한 번에 보여줄 슬라이드의 개수를 설정합니다. 1.2로 설정하면 한 개의 슬라이드가 완전히 보이고, 다음 슬라이드가 일부 보이게 됩니다.

  3. centeredSlides: true
    현재 활성화된 슬라이드를 중앙에 위치하도록 설정합니다. 기본적으로 왼쪽 정렬이지만, 이 옵션을 사용하면 중앙 정렬됩니다. 위에 1.2로 설정한 slidesPerView 와 함께 사용하면, 슬라이드의 양 옆으로 일부 보이게 표현할 수 있습니다.

  4. spaceBetween: 10
    슬라이드 간의 간격을 픽셀 단위로 지정합니다. 여기서는 10px 간격을 적용했습니다.

  5. speed: 1000
    슬라이드 전환 속도를 설정합니다. 단위는 밀리초(ms)이며, 1000ms(=1초) 동안 애니메이션이 진행됩니다.

  6. autoplay
    슬라이드 자동 재생을 설정하는 옵션입니다.

    • delay: 2500 → 2.5초(2500ms)마다 자동으로 슬라이드가 넘어갑니다.
    • disableOnInteraction: false → 사용자가 슬라이드를 터치하거나 마우스로 조작해도 자동 재생이 멈추지 않습니다.
    • pauseOnMouseEnter: true → 마우스를 올리면 자동 재생이 일시 정지됩니다.

  7. breakpoints
    레스폰시브 디자인 설정을 적용하는 옵션입니다. 특정 화면 크기 이상일 때 설정을 다르게 적용할 수 있습니다. 여기에 사용된 코드는 이런 의미입니다.

    • 화면크기가 900px 이상일 때:

    slidesPerView: 1 → 한 번에 한 개의 슬라이드만 표시
    spaceBetween: 20 → 슬라이드 간 간격을 20px로 변경

  8. navigation
    이전/다음 버튼을 추가하여 수동으로 슬라이드를 넘길 수 있도록 설정합니다.

    • nextEl: '.swiper-button-next' → 다음 슬라이드 버튼 선택자
    • prevEl: '.swiper-button-prev' → 이전 슬라이드 버튼 선택자

  9. freeMode: true
    사용자가 터치(드래그)하여 슬라이드를 넘길 때, 특정한 위치에서 멈추지 않고 자유롭게 움직일 수 있도록 설정합니다.

  10. forceToAxis: true
    사용자가 슬라이드를 대각선으로 드래그할 경우, 지정된 방향(가로 또는 세로)으로만 이동하도록 강제하는 옵션입니다.

    • Swiper는 기본적으로 터치를 인식하면 어느 정도 대각선 이동도 허용하지만, forceToAxis: true를 설정하면 수직 이동을 차단하고 가로 방향(horizontal)으로만 이동하도록 제한합니다.
    • freeMode: true와 함께 사용해야 정상적으로 동작합니다.

5. 전체 코드

<essepage-head>
    <script src="https://fastly.jsdelivr.net/npm/@tailwindcss/browser@4/dist/index.global.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
</essepage-head>

<div class="swiper swiper-slider w-full max-w-xl">
    <div class="swiper-wrapper">
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-red-100 p-4">
                <span class="font-bold text-3xl">1</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-orange-100 p-4">
                <span class="font-bold text-3xl">2</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-yellow-100 p-4">
                <span class="font-bold text-3xl">3</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-green-100 p-4">
                <span class="font-bold text-3xl">4</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-blue-100 p-4">
                <span class="font-bold text-3xl">5</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-indigo-100 p-4">
                <span class="font-bold text-3xl">6</span>
            </div>
        </div>
        <div class="swiper-slide w-full max-w-xl">
            <div class="aspect-square w-full h-full bg-purple-100 p-4">
                <span class="font-bold text-3xl">7</span>
            </div>
        </div>
    </div>

    <div class="swiper-button-next !right-2 !w-6 md:!w-8 !h-6 md:!h-8 !flex !items-center !justify-center !rounded-full !border !border-black !bg-white !text-black">
        <svg class="w-4 md:w-5 h-4 md:h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <polyline points="9 6 15 12 9 18"></polyline>
        </svg>
    </div>

    <div class="swiper-button-prev !left-2 !w-6 md:!w-8 !h-6 md:!h-8 !flex !items-center !justify-center !rounded-full !border !border-black !bg-white !text-black">
        <svg class="w-4 md:w-5 h-4 md:h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <polyline points="15 6 9 12 15 18"></polyline>
        </svg>    
    </div>
</div>

<style>
    .swiper-button-next::after, .swiper-button-prev::after {
        display: none;
    }
</style>

<script>
    const imageSlider = new Swiper(".swiper-slider", {
        loop: true,
        speed: 1000,
        direction: 'horizontal',
        slidesPerView: 1.2,
        centeredSlides: true,
        spaceBetween: 10,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            900: {
                slidesPerView: 1,
                spaceBetween: 20,
            },
        },
        freeMode: true,
        forceToAxis: true
    });
</script>

6. 실행된 이미지 슬라이더 스크린샷

Swiper 실행 스크린샷

✨ 마무리

제가 주로 사용하는 Swiper를 활용한 이미지 슬라이더 코드를 정리해보았습니다. 더 자세한 내용이나 직접 사용해보고 싶다면 제가 Essepage 에 만든 무료템플릿을 사용해 보세요😄

👉 템플릿 바로가기 - SwiperJS 이미지 슬라이더

Brad P. @brad

안녕하세요?^^ 개발자라는 소리를 듣고 싶어 늦은 나이에 개발의 세계에 몸담게 된 Brad 라고 합니다. 아직 개발의 'ㄱ' 자도 모르지만, 개발을 배우면서 알게되는 것들을 림프에 정리해보려고 합니다. 저의 부족한 글이 누군가에게 조금이나마 도움이 되길 바랍니다.

프로필
Essedrop - 이미지 주소를 만드는 가장 빠른 방법

¶ 목차

자주 사용하는 Swiper 기본 설정 코드
 

독자 의견

저자 @brad 에게 의견 남기기:

Please sign in to comment.
Markdown is also available in comment.
Post Comment