Swiper.js를 활용한 초 간단 이미지 슬라이더 구현

 

Swiper.js는 다양한 웹사이트에서 많이 사용되는 슬라이더 라이브러리로, 간편하게 강력한 기능을 제공한다.이 글에서는 Swiper.js를 사용해 기본적인 이미지 슬라이더를 구현하는 방법을 소개 합니다.

 

cdn 스크립트

<!-- CDN 방식 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

 

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
        <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
        <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
    </div>
    <!-- 네비게이션 버튼 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- 페이지 네비게이션 -->
    <div class="swiper-pagination"></div>
</div>

 

 

CSS

.swiper-container {
    width: 100%;
    height: 300px;
}

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

 

Javascript

const swiper = new Swiper('.swiper-container', {
    loop: true, // 무한 슬라이드
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    autoplay: {
        delay: 3000, // 3초마다 자동으로 슬라이드 이동
    },
});

 

 

• Swiper.js를 사용하면 반응형 슬라이더를 간편하게 구현할 수 있다.
• 이 글에서 소개한 기본적인 슬라이더 외에도 Swiper.js는 다양한 고급 기능을 제공하니, 이를 활용해 더욱 다양한 슬라이더를 만들어보자.

전체 코드 예시 )

<!-- CDN 방식 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<style>
    .swiper-container {
        width: 100%;
        height: 300px;
    }

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

</style>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
        <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
        <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
    </div>
    <!-- 네비게이션 버튼 -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- 페이지 네비게이션 -->
    <div class="swiper-pagination"></div>
</div>

<script>
    const swiper = new Swiper('.swiper-container', {
        loop: true, // 무한 슬라이드
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        autoplay: {
            delay: 3000, // 3초마다 자동으로 슬라이드 이동
        },
    });

</script>