여러 사이트를 개발하다보면 롤링 스크립트를 넣어야 하는 경우가 있다. 물론 나는 사이트를 무겁게 만드는 롤링 스크립트들을 좋아하지는 않는다. 하지만 사용자의 보는 눈을 한층 더 즐겁게 만들어 주는 롤링 스크립트는 많은 요청이 있기때문에 여러 롤링 스크립트를 알아 두면 좋다. 

오늘 소개할 롤링 스크립트는 Siema 로 상당히 가벼운 롤링 스크립트인것 같아 리뷰를 해볼려고 한다. 참고로 지금까지 내가 주로 사용했던 롤링 스크립트는 SwiperJS, Bxslider, Slick 등이 있다.

위 3개 롤링 스크립트 API의 공통점은 매뉴얼도 많고 꾸준히 버전업을 해오고 있다는것이다. 단 Slick 의 경우 가볍다는 장점이 있었는데 요즘들어서는 업데이트가 잘 안되서 그런지 몰라도 무겁기도 하고 적용된 소스를 보면 HTML 태그를 무시하고 엘리먼트를 생성하는 경우가 있다. 아무튼 위 3개 롤링 스크립트 API도 본 포스팅 하단에 링크를 걸어 두었으니 같이 살펴보도록 하고 이번편에서는 Siema에 대해 알아보도록 하자 

Siema 는 아래에서 다운로드가 가능하다 본 예제에서는 CDN을 이용하니 잠깐 테스트만 한다면 모듈을 다운받을 필요는 없다. 

사용 예제의 경우 아래의 소스를 이용하여 확인 가능하며, 아래 소스는 커스텀된 소스로 공통 적용이 가능하도록 구성해 보았다. 조금더 심플한 소스를 원한다면 Siema GIT 사이트에 나와있는 예제를 참고하도록 하자 

<!-- jquery 라이브러리 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><?php // http://craftpip.github.io/jquery-confirm/ ?> 

<!-- siema 라이브러리 -->
<script src="https://cdn.jsdelivr.net/npm/siema@1.5.1/dist/siema.min.js"></script>


<h1>슬라이드 1</h1>
<div class="siema-event" data-custom-page="true" data-per-page="3" data-multiple-drag="false"  data-on-init="sm.eventInit" data-on-change="sm.eventChange">
  <div class="item" style=" background-color: #eeeeee; ">슬라이드1-1</div>
  <div class="item" style=" background-color: #333333; ">슬라이드1-2</div>
  <div class="item" style=" background-color: #336699; ">슬라이드1-3</div>
  <div class="item" style=" background-color: #09afce; ">슬라이드1-4</div>
  <div class="item" style=" background-color: #95afc9; ">슬라이드1-5</div>
</div>

<h1>슬라이드 2</h1>
<div class="siema-event" data-custom-page="true" data-draggable="false" data-on-init="sm.eventInit" data-on-change="sm.eventChange">
  <div class="item" style=" background-color: #eeeeee; ">슬라이드2-1</div>
  <div class="item" style=" background-color: #333333; ">슬라이드2-2</div>
  <div class="item" style=" background-color: #336699; ">슬라이드2-3</div>
  <div class="item" style=" background-color: #09afce; ">슬라이드2-4</div>
  <div class="item" style=" background-color: #95afc9; ">슬라이드2-5</div>
</div>

<style>
	h1{ text-align:center; }
	.siema-event{ width:100%; max-width: 350px; margin:30px auto; border:solid 1px #999}
	.siema-event .item{ width:100%;height:350px; line-height: 350px; text-align: center;}
	.page{ text-align:center;  }
	.page a{ display: inline-block; padding:2px 10px; margin:0 4px; border:solid 1px #333;text-decoration: none;; }
	.page a.on{ background-color:#eee; }
</style>

<script>
var sm = {
	obj : [],
	load : function(){
		var thisObj = this;
		$('.siema-event').each(function(i,v){
			$(v).attr('data-index',i);
			var thisData = $(v).data();
			var addClass = 'siema-event-'+i;
			$(v).addClass(addClass);

			// data-custom-pager => 커스텀 페이저 옵션 
			if( thisData.customPage == true){
				thisObj.createPage(i,typeof thisData.perPage != 'undefined' ? thisData.perPage : 1);
			}

			thisObj.obj[i] = new Siema({
			  selector: '.'+addClass,
			  duration: typeof thisData.duration != 'undefined' ? thisData.duration : 200,
			  easing: typeof thisData.easing != 'undefined' ? thisData.easing : 'ease-out',
			  perPage: typeof thisData.perPage != 'undefined' ? thisData.perPage : 1,
			  startIndex: typeof thisData.startIndex != 'undefined' ? thisData.startIndex : 0,
			  draggable: typeof thisData.draggable != 'undefined' ? thisData.draggable : true,
			  multipleDrag: typeof thisData.multipleDrag != 'undefined' ? thisData.multipleDrag : true,
			  threshold: typeof thisData.threshold != 'undefined' ? thisData.threshold : 20,
			  loop: typeof thisData.loop != 'undefined' ? thisData.loop : true,
			  rtl: typeof thisData.rtl != 'undefined' ? thisData.rtl : false,
			  onInit: () => {
			  		if( typeof thisData.onInit != 'undefined'){
			  			new Function('return '+thisData.onInit+'(this,'+i+')')();
			  		}
			  },
			  onChange: () => {
			  		if( typeof thisData.onChange != 'undefined'){
			  			new Function('return '+thisData.onChange+'(this,'+i+')')();
			  		}			  		
			  },
			});
		});;
	},

	// 이벤트 초기화 가 있을 경우
	eventInit : function(e,index){
	},

	// 슬라이드가 변경될 시 이벤트
	eventChange : function(e,index){
		var thisObj = this;
		var $pageEl = $('.siema-event-'+index+'-page');
		var pageIndex = thisObj.obj[index].currentSlide;
		var perPage = thisObj.obj[index].perPage;
		if( pageIndex < 0){ pageIndex = $pageEl.find('.page-btn').length+pageIndex; }
		console.log(pageIndex);

		$pageEl.find('.page-btn').removeClass('on');
		$pageEl.find('.page-btn[data-index="'+pageIndex+'"]').addClass('on');
	},	

	// 페이지를 자동으로 생성해준다.
	createPage : function(index, perPage){
		var $el = $('.siema-event').eq(index);
		var pageClass = 'siema-event-'+index+'-page';
		var pageHtml = '<div class="page '+pageClass+'" data-index="'+index+'">';
		var maxLen = $el.find('.item').length;

		for(i=0;i<maxLen;i++){
			pageHtml += '<a href="#none" class="page-btn" data-index="'+i+'" onclick="return false;">'+(i+1)+'</a>';
		};
		pageHtml += '</div>';
		$('.'+pageClass).remove();
		$el.after(pageHtml);
		$('.'+pageClass).find('.page-btn').eq(0).addClass('on');
	}	
}
$(document).ready(function(){
	sm.load();
});
$(document).on('click','.page-btn',function(){
	var index = $(this).index();
	var parentData = $(this).closest('.page').data();
	sm.obj[parentData.index].goTo(index);
})
</script>

Siema는 간단한 롤링에서는 상당히 좋은 성능을 발휘할 수 있다고 생각한다. 이에대한 상세옵션 및 사용가능한 API 메서드는 GIT에도 나와있기때문에 아래의 설명과 함께 참고하는게 좋다.  

위와 같이 Siema 에대해 자세히 알아보았다.  아래는 처음 언급했던 내가 자주 사용하는 롤링 스크립트이니 참고 하기 바란다.