반응형
sly 라이브러리 사용하려는데 공식 페이지에 문제가 있는것 같아서
기본적으로 사용하는 소스코드를 공개합니다
jQuery(function($){
'use strict';
// -------------------------------------------------------------
// 기본 네비게이션
// -------------------------------------------------------------
(function () {
var $frame = $('#basic');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
forward: $wrap.find('.forward'),
backward: $wrap.find('.backward'),
prev: $wrap.find('.prev'),
next: $wrap.find('.next'),
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// 시작 버튼
$wrap.find('.toStart').on('click', function () {
var item = $(this).data('item');
// Animate a particular item to the start of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toStart', item);
});
// 가운데 버튼
$wrap.find('.toCenter').on('click', function () {
var item = $(this).data('item');
// Animate a particular item to the center of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toCenter', item);
});
// To End button
$wrap.find('.toEnd').on('click', function () {
var item = $(this).data('item');
// Animate a particular item to the end of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toEnd', item);
});
// 아이템 추가
$wrap.find('.add').on('click', function () {
$frame.sly('add', '<li>' + $slidee.children().length + '</li>');
});
// 아이템 삭제
$wrap.find('.remove').on('click', function () {
$frame.sly('remove', -1);
});
}());
// -------------------------------------------------------------
// 중앙 네비게이션
// -------------------------------------------------------------
(function () {
var $frame = $('#centered');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'centered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 4,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
// -------------------------------------------------------------
// 강제 중앙 네비게이션
// -------------------------------------------------------------
(function () {
var $frame = $('#forcecentered');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
// -------------------------------------------------------------
// 항목별 순환
// -------------------------------------------------------------
(function () {
var $frame = $('#cycleitems');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Cycling
cycleBy: 'items',
cycleInterval: 1000,
pauseOnHover: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
// Pause button
$wrap.find('.pause').on('click', function () {
$frame.sly('pause');
});
// Resume button
$wrap.find('.resume').on('click', function () {
$frame.sly('resume');
});
// Toggle button
$wrap.find('.toggle').on('click', function () {
$frame.sly('toggle');
});
}());
// -------------------------------------------------------------
// 페이지별 순환
// -------------------------------------------------------------
(function () {
var $frame = $('#cyclepages');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Cycling
cycleBy: 'pages',
cycleInterval: 1000,
pauseOnHover: 1,
startPaused: 1,
// Buttons
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// Pause button
$wrap.find('.pause').on('click', function () {
$frame.sly('pause');
});
// Resume button
$wrap.find('.resume').on('click', function () {
$frame.sly('resume');
});
// Toggle button
$wrap.find('.toggle').on('click', function () {
$frame.sly('toggle');
});
}());
// -------------------------------------------------------------
// 프레임 하나에 하나의 항목
// -------------------------------------------------------------
(function () {
var $frame = $('#oneperframe');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
// -------------------------------------------------------------
// Crazy
// -------------------------------------------------------------
(function () {
var $frame = $('#crazy');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
forward: $wrap.find('.forward'),
backward: $wrap.find('.backward'),
prev: $wrap.find('.prev'),
next: $wrap.find('.next'),
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// To Start button
$wrap.find('.toStart').on('click', function () {
var item = $(this).data('item');
// Animate a particular item to the start of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toStart', item);
});
// To Center button
$wrap.find('.toCenter').on('click', function () {
var item = $(this).data('item');
// Animate a particular item to the center of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toCenter', item);
});
// To End button
$wrap.find('.toEnd').on('click', function () {
var item = $(this).data('item');
// Animate a particular item to the end of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toEnd', item);
});
// Add item
$wrap.find('.add').on('click', function () {
$frame.sly('add', '<li>' + $slidee.children().length + '</li>');
});
// Remove item
$wrap.find('.remove').on('click', function () {
$frame.sly('remove', -1);
});
}());
});
반응형
'Developer > Etc' 카테고리의 다른 글
| crt to bks (0) | 2019.12.06 |
|---|---|
| 개발자에게 유용한 크롬 확장프로그램 (0) | 2019.05.13 |
| 이미지 파일 용량을 줄이고 싶을때 (0) | 2018.10.26 |
| 윈10 시작프로그램 등록 (0) | 2018.04.09 |
| HTML, CSS, JS (한줄로 or 정렬) (0) | 2018.03.13 |