그룹형 순환 슬라이드를 말합니다.
주로 많은 썸네일을 한 번에 보이고 싶을 때 사용됩니다.
TODO
- 화면에 보여질 썸네일 갯수와 그룹 지어 움직일 썸네일 갯수가 같을 경우 개선
- 애니메이트 효과 추가
- 템플릿 추가
Options
| Name | Type | Default | Description |
|---|---|---|---|
| startIndex | number | 0 | 로드 시, 첫 번째 순서로 보여줄 썸네일 번호를 정합니다. ※썸네일 순서는 0부터 시작합니다. |
| speed | number or string |
400 | 슬라이드 속도를 설정합니다. 숫자로 설정 가능하며 문자로는 'slow', 'fast'로 설정 가능합니다. ※'slow': 200, 'fast': 600, 미 입력 : 400 |
| rotation | string | scroll | 슬라이드의 스크롤 방식을 설정합니다. ※현재 'scroll'방식만 지원합니다. |
| visible | number | null | 화면에 보여지는 썸네일의 갯수를 설정합니다. |
| grouping | number | null | 그룹 지어 스크롤 할 썸네일의 갯수를 설정합니다. |
| usePaging | boolean | true | 페이징 버튼의 사용 여부를 설정합니다. |
HTML
한 페이지에 슬라이드가 여러 개일 경우, slider-container에 Id를 지정하여 rfcCarousel을 연결 한 후, 커스터마이징하면 됩니다.
CSS
.slider-container { margin-left: 100px; }
.slider-wrap { position: relative; overflow: hidden; }
.slider { position: absolute; list-style: none; }
.slider:after { display: block; height: 0; content: ''; visibility: hidden; clear: both; }
.slider-item { float: left; }
.slider-nav { position: relative; margin-top: 20px; text-align: center; }
.slider-btn {
display: block; position: absolute; width: 0; height: 0; border-color: transparent;
border-width: 28px; border-style: solid; background: transparent; text-indent: -9999px;
top: -110px; cursor: pointer;
}
.slider-prev { border-right-color: #ee5f5b; left: -100px; }
.slider-next { border-left-color: #ee5f5b; right: -100px; }
.slider-paging { display: inline-block; position: relative; list-style: none; }
.slider-paging:after { display: block; height: 0; content: ''; visibility: hidden; clear: both; }
.slider-paging a {
float: left; margin-right: 5px; width: 10px; height: 10px; border-radius: 10px;
border: 1px solid #bbbbbb; background: #ffffff; text-indent: -9999px; cursor: pointer;
}
.slider-paging a.active { border-color: #ee5f5b; background: #EE5F5B; }
/* carousel 플러그인 커스터마이징 예제 */
#sample { margin: 50px 150px; }
#sample .slider-item { width: 180px; height: 120px; }
slider-item에 width, height 값을 지정해 주어야 합니다.
Javascript
/** =======================================================
* RFC Carousel Plugin - 2014.03.03
*
* @Author Kim So Young (kimsy8989@gmail.com)
* @Copyright © 2014 RSUPPORT. CO, LTD. All rights Reserved.
*
* @Required jQuery
* ======================================================== */
;(function ($, doc, win) {
$.fn.rfcCarousel = $.rfcCarousel = function(options, targetIndex) {
var opts = $.extend({}, $.fn.rfcCarousel.defaults, options);
return this.each(function(index, item) {
var $sliderContainer = $(this)
, $sliderWrap = $sliderContainer.find('.slider-wrap')
, $slider = $sliderContainer.find('.slider')
, $sliderItems = $sliderContainer.find('.slider-item')
, $naviWrap = $sliderContainer.find('.slider-nav')
, $button = $naviWrap.find('.slider-btn')
, $pagination = $naviWrap.find('.slider-paging')
, itemLength = $sliderItems.length
, itemWidth = $sliderItems.outerWidth()
, itemHeight = $sliderItems.outerHeight()
, speed = opts.speed
, visible = opts.visible
, grouping = opts.grouping
, usePaging = opts.usePaging
, currentIndex;
switch(speed) {
case 'fast':
speed = 200;
break;
case 'slow':
speed = 600;
break;
default:
speed = 400;
break;
}
$sliderItems.each(function(index, item) {
$(item).attr('thumbIndex', index+1);
});
if (visible < grouping) {
visible = grouping;
}
if (visible > 1) {
$sliderWrap.css({
'width': itemWidth * visible,
'height': itemHeight
});
$slider.css('width', itemWidth * itemLength);
$naviWrap.css('width', itemWidth * visible);
}
if (usePaging === true) {
var pagingLength = Math.floor(itemLength/grouping);
for (var i = 0; i < pagingLength; i++) {
$('').text(i+1).appendTo($pagination);
}
}
/* init */
var startIndex = opts.startIndex * grouping;
$slider.css('left', startIndex * itemWidth);
currentIndex = startIndex;
$.rfcCarousel.active($pagination, grouping, startIndex);
/* event */
$naviWrap.on('click', 'button, a', function(event) {
event.preventDefault();
var $this = $(event.target)
, currentIndex = -($slider.position().left) / itemWidth
, direction
, options = {
'itemLength': itemLength,
'itemWidth': itemWidth,
'grouping': grouping,
'speed': speed,
'slider': $slider,
'pagination': $pagination
};
if ($this.is($button)) {
direction = ($this.attr('class').indexOf('next') < 0) ? 'prev' : 'next';
} else {
direction = $this.index();
}
$.rfcCarousel.getIndex(options, direction, currentIndex);
});
});
}
$.rfcCarousel.getIndex = function(options, direction, currentIndex) {
var itemLength = options.itemLength
, itemWidth = options.itemWidth
, grouping = options.grouping
, maxIndex = (itemLength - grouping) -1
, minIndex = grouping
, targetIndex;
switch(direction) {
case 'next':
targetIndex = currentIndex + grouping;
break;
case 'prev':
targetIndex = currentIndex - grouping;
break;
default:
pageIndex = parseInt(direction, 10);
targetIndex = pageIndex * grouping;
break;
}
if (targetIndex > maxIndex) {
targetIndex = (currentIndex == maxIndex) ? 0 : maxIndex;
} else if (targetIndex < minIndex) {
targetIndex = (targetIndex < 0) ? maxIndex : 0;
}
$.rfcCarousel.active(options.pagination, grouping, targetIndex);
$.rfcCarousel.move(options, targetIndex);
}
$.rfcCarousel.active = function(pagination, grouping, targetIndex) {
var index = targetIndex/grouping;
pagination.children('a').eq(index).addClass('active').siblings('a').removeClass('active');
}
$.rfcCarousel.move = function(options, targetIndex) {
options.slider.animate({
'left': -(options.itemWidth) * targetIndex
}, options.speed);
}
$.fn.rfcCarousel.defaults = {
startIndex: 0,
speed: null,
rotation: 'scroll',
visible: 2,
grouping: 1,
usePaging: true
};
}(jQuery, document, window));
/* carousel 플러그인 적용 */
$('#sample').rfcCarousel({
startIndex: 0,
rotation: 'scroll',
visible: 3,
grouping: 2,
usePaging: true
});
History
- Carousel 그룹형 플러그인 제작[김소영 | 2014.03.03]
- 이미지 로딩 속도에 따라 썸네일의 width, height 값을 읽지 못하는 이슈 수정[김소영 | 2014.03.31]