[JS] 이미지 슬라이드 라이브러리 - Splide 사용

현재 업무를 보고있는 사이트에서 트래픽 이슈가 생겼다.

동시접속자가 늘어나 페이지에서 한번에 로딩후 슬라이드 하던 이미지들이 잡아먹는 용량이 주 원인

이 이미지들을 슬라이드 할때 나눠서 로딩 되도록 로직을 변경해야한다.

변경하는 과정에서 기존 CSS 를 이용한 슬라이드 방법에서 라이브러리를 선택해 적용하는 방식으로 바꾸기로 했다.

 

라이브러리를 찾아보며 bxSlider, slick 등 여러가지를 찾아서 해보다가 Splide를 사용하기로 결정했다.

Splide를 선택한 가장 큰 이유는 슬라이드 요소를 추가하는 방식이 가장 간단하고 이용하기 편리했다.

 

 

https://splidejs.com/

Splide - The lightweight, flexible and accessible slider/carousel

 

 

https://github.com/Splidejs/splide/releases/tag/v4.1.3

Release v4.1.3 · Splidejs/splide

 

Sourcs code(zip) 파일 다운 후 원하는 경로에 넣고 적용

<link rel="stylesheet" type="text/css" href="경로/splide.min.css"/>
<link rel="stylesheet" type="text/css" href="경로/splide-default.min.css"/>
<script type="text/javascript" src="경로/splide.min.js"></script>

Splide를 사용하기 위해서는 Class명을 잘 맞춰줘야한다.

splide -> splide__track -> splide__list -> splide__slide ("_" 두번)

EX)

<section id="splide_practice" class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<h3><span>안녕하세요</span> splide 첫번째</h3>
			</li>
			<li class="splide__slide">
				<h3><span>안녕하세요</span> splide 두번째</h3>
			</li>
			<li class="splide__slide">
				<h3><span>안녕하세요</span> splide 세번째</h3>
			</li>
			<li class="splide__slide">
				<h3><span>안녕하세요</span> splide 네번째</h3>
			</li>
			<li class="splide__slide">
				<h3><span>안녕하세요</span> splide 다섯번째</h3>
			</li>
			<li class="splide__slide">
				<h3><span>안녕하세요</span> splide 여섯번째</h3>
			</li>
		</ul>
	</div>
</section>

 

 

슬라이드 할 내용에 class를 모두 적용시키면 script 에 아래 내용을 추가한다.

var splide = new Splide('#splide_practice', {
	type: 'loop', //롤링 끝나면 반복
	autoplay : true, //자동시작
	perPage : 5, //한 페이지에 노출되는 이미지
	perMove : 1, //슬라이드 이미지 개수
	arrows : false, //왼쪽 오른쪽 슬라이드 버튼 제거
	drag : false, //드래그 비활성
	interval : 3000, //3000ms(3초) 마다 슬라이드
	pauseOnHover : false, //마우스 오버시 일시정지 비활성
	pauseOnFocus : false, //포커스시 일시정지 비활성
	pagenation : false //페이지네이션 점 비활성
}).mount();

class가 splide 인 요소를 선택해서 적용하면 된다.

본인은 이런 옵션을 사용해서 구현하였고, 더 많은 옵션들은 splide 공식 홈페이지에서 참고하면 된다.

 

이렇게만 해도 기본적인 캐러셀 슬라이드를 구현할수있다.

 

https://github.com/cms0403/Splide_Practice

GitHub - cms0403/Splide_Practice

해당내용 적용한 내용 github에 정리해두었다. 보고 참고하면 좋을것같다.