swiper 슬라이드 사용법, 반응형 option, loop 정리

카테고리 없음

swiper 슬라이드 사용법, 반응형 option, loop 정리

oodada 2023. 9. 23. 14:00

#swiper #slide

홈페이지에 빠지지 않는 슬라이드의 대모, 모든 이들이 사용하는 슬라이드인

swiper 슬라이드 에 대해 알아보자

아래 사이즈에 가면 사용방법과 데모를 볼 수 있다.

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

1. Getting Started With Swiper

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

HTML

<!-- swiper --> 
<div class="swiper mySwiper"> 
	<div class="swiper-wrapper"> 
    	<div class="swiper-slide">Slide 1</div> 
        <div class="swiper-slide">Slide 2</div> 
        <div class="swiper-slide">Slide 3</div> 
        <div class="swiper-slide">Slide 4</div> 
        <div class="swiper-slide">Slide 5</div> 
        <div class="swiper-slide">Slide 6</div> 
        <div class="swiper-slide">Slide 7</div> 
        <div class="swiper-slide">Slide 8</div> 
        <div class="swiper-slide">Slide 9</div> 
     </div> 
     <div class="swiper-button-next"></div> 
     <div class="swiper-button-prev"></div> 
     <div class="swiper-pagination"></div> 
</div>

.swiper { width: 100%; height: 100%; } 
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } 
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.swiper { margin-left: auto; margin-right: auto; }

var swiper = new Swiper(".mySwiper", { 
	slidesPerView: 4, 
    spaceBetween: 30, 
    centeredSlides: true, 
    loop: true, 
    pagination: { 
    	el: ".swiper-pagination", 
        clickable: true, 
    }, 
    navigation: { 
    	nextEl: ".swiper-button-next", 
        prevEl: ".swiper-button-prev", 
    }, 
   	// swiper의 반응형은 mobile -> desktop 으로 작업한다. 
    breakpoints: { 
    	640: { 
        	slidesPerView: 2, 
            spaceBetween: 20, 
        }, 
        768: { 
        	slidesPerView: 4, 
            spaceBetween: 40, 
        }, 
        1024: { 
        	slidesPerView: 5, spaceBetween: 50, 
        }, 
    }, 
});

데모 페이지에 모든 경우의 슬라이드 예제가 있다.

사용하고 싶은 슬라이드를 찾아 적용해보자.