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

 

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

 

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

 

Siema | GIT 

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

 
GitHub - pawelgrzybek/siema: Siema - Lightweight and simple carousel in pure JavaScript
Siema - Lightweight and simple carousel in pure JavaScript - GitHub - pawelgrzybek/siema: Siema - Lightweight and simple carousel in pure JavaScript
github.com/pawelgrzybek/siema

 

사용예제 

사용 예제의 경우 아래의 소스를 이용하여 확인 가능하며, 아래 소스는 커스텀된 소스로 공통 적용이 가능하도록 구성해 보았다. 조금더 심플한 소스를 원한다면 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>

 

예제 테스트 바로가기
 
R BLOG - 테스트 뷰어
보고 계시는 페이지는 R BLOG 에서 제공된 테스트 뷰어 입니다.
blog.redinfo.co.kr/test/ex/siemajs

 

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

 

사용가능 옵션
옵션명 설명

select

  •  타입
    •  CSS 선택자 또는 DOM 객체  
  • 설명
    • 롤링이 적용될 부모 엘리먼트 선택자를 지정할 수 있다.  
  • 예제

 duration

  •  타입
    • number (숫자)
  • 설명
    • 슬라이드 이동 속도를 지정할 수 있다. (1000 = 1초)
  • 예제

easing

  • 타입
    • string (문자)
    • ex) ease , linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1,y1,x2,y2) 
  • 설명
    • CSS 애니메이션 효과 지정 가능 
  • 예제

perPage

  • 타입
    • number or object (숫자 또는 객체)
  • 설명
    • number 일 경우 화면에 표시될 슬라이드 아이템 개수를 지정가능하다. 
    • object 일 경우 화면 크기에 따라 페이지를 지정 가능하다. 
  • 예제

startIndex

  • 타입
    • number
  • 설명
    • 시작 인덱스를 지정가능하며 기본 인덱스는 0부터 시작이다.
  • 예제

draggable

  • 타입
    • boolean(불리언) 
    • ex) true or flase
  • 설명
    • 롤링에 대한 드래그 및 터치 옵션으로 기본값은 true 이다.
  • 예제

multipleDrag

  • 타입
    • boolean(불리언) 
    • ex) true or flase
  • 설명
    • 드래그를 이용하여 한번에 많은 슬라이드를 이동할 수 있다.

threshold

  • 타입
    • number(숫자)
  • 설명
    • 터치 또는 마우스 드래그의 임계값을 px 단위로 설정 가능하다. (민감도) 
    • 기본은 20이다. 
  • 예제

loop

  • 타입
    • boolean(불리언) 
    • ex) true or flase
  • 설명
    • 슬라이드를 계속 반복시킬 수 있는 옵션이다. 
  • 예제

rtl

  • 타입
    • boolean(불리언) 
    • ex) true or flase
  • 설명
    • 슬라이드를 역순으로 작동시킬 수 있는 옵션이다. 
    • ex) 0~5개의 슬라이드 인덱스가 있을 경우 0에서 next 를 하면 5->4->3->2->1 순으로 슬라이드가 이동된다.
  • 예제

onInit

  • 타입
    • function(함수)
  • 설명
    • API가 초기화 직 후 바로 실행된다.
  • 예제

onChange

  • 타입
    • function(함수)
  • 설명
    • 슬라이드 변경 후 실행된다. 
  • 예제

 

사용가능 메서드 API
옵션명 설명

prev

(howManySlides = 1, callback)

  • 설명
    • 이전 슬라이드로 이동할 수 있는 메서드 
    • callback 메서드를 통해 별도 처리도 가능하다.
  • 예제

next

(howManySlides = 1, callback)

  • 설명
    • 다음 슬라이드로 이동할 수 있는 메서드 
    • callback 메서드를 통해 별도 처리도 가능하다.
  • 예제

goTo

(index, callback)

  • 설명
    • 지정된 Index로 이동할 수 있는 메서드 
    • callback 메서드를 통해 별도 처리도 가능하다.
  • 예제

remove

(index, callback)

  • 설명
    • Index에 해당 되는 슬라이드를 삭제할 수 있다.
    • callback 메서드를 통해 별도 처리도 가능하다.
  • 예제

insert

(item, index, callback)

  • 설명
    • item 을 원하는 Index 위치에 추가가 가능하다. 
    • item 은 DOM 객체를 지정하다. 
    • callback 메서드를 통해 별도 처리도 가능하다.
  • 예제

prepend

(item, callback)

 

  • 설명
    • 시작 슬라이드 앞에 아이템을 추가할 수 있다.
    • callback 메서드를 통해 별도 처리도 가능하다.
  • 예제

append

(item, callback)

  • 설명
    • 미자막 슬라이드 앞에 아이템을 추가할 수 있다.
    • callback 메서드를 통해 별도 처리도 가능하다.
  • 예제

destroy

(restoreMarkup = false, callback)

  • 설명
    • 적용된 슬라이드 마크업을 해제할 수 있다. 
    • restoreMarkup 메서드를 false 처리할 경우 단순히 슬라이드 할 수 있는 기능만 삭제된다. 
    • restoreMarkup 메서드를 true 처리할 경우 슬라이드 이벤트 적용전 초기 상태로 돌릴 수 있다.
    • callback 메서드를 통해 별도 처리도 가능하다.
  • 예제

currentSlide

  • 설명
    • 현재 슬라이드의 Index 값을 가져올 수 있다. 
    • 참고로 해당 API는 함수가 아닌 변수다. 
  • 예제

 

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

 

SwiperJS
 
Swiper API
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com/swiper-api

 

Bxslider
 
jQuery Content Slider | Responsive jQuery Slider | bxSlider
jQuery Content Slider | Responsive jQuery Slider | bxSlider
bxslider.com/

 

Slick
 
slick - the last carousel you'll ever need
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!
kenwheeler.github.io/slick/