반응형
3.0 버전에서 인디케이터 클릭시 중간에 있는 슬라이더들을 순차적으로 이동하지 않고
즉시 대상 슬라이더로 이동하도록 하는 옵션이 추가되었습니다.
추가된 기능 외에는 기존 3.0 버전과 동일합니다.
3.0 버전의 상세 기능 안내는 ->여기를 클릭해 확인하시기 바랍니다.
스크립트에 추가된 변수 옵션은
$indicatorjump = true; // 인디케이터 클릭시 슬라이드 순차 이동 없이 점프함.
입니다.
"true" 이면 중간 슬라이드를 건너뛰고 "false"이면 기존 3.0 과 같이 순차적으로 이동합니다.
아래는 3.1 버전 풀소스입니다.
복사해서 기존 coverSlider 함수를 대체하면 됩니다.
코드의 빨강색 부분이 기존 3.0 버전에서 패치된 부분입니다.
function coverSlider(){
$(".cover-slider").each(function(){
var $this = $(this); // 현재 슬라이드 이너 객체
//환경설정
// 슬라이드 애니메이션 타입
$animtype = $('body').data('cover-slider-type') != undefined ? $('body').data('cover-slider-type'):0; // 0:오른쪽방향 이동(next클릭), 1: 왼쪽방향 이동(prev클릭), 2: 페이드인아웃 오른쪽 방향(next클릭), 3: 페이드인아웃 왼쪽 방향(prev클릭)
//슬라이드 교체 간격
$secondval = $('body').data('cover-slider-interval') != undefined ? (!isNaN($('body').data('cover-slider-interval'))?parseInt($('body').data('cover-slider-interval')):5):5; // 커버 슬라이드 교체 간격. 기본값 5(초)
$interval = $secondval*1000; // 슬라이드 이동 간격 - 기본설정 5000(5초), 0이면 멈춤, 슬라이드 교체 간격
$animateTime = 500; // 슬라이드 이동시간 - 기본설정 500(0.5초), 커지면 느리게 애니메이션
$indicatorjump = true; // 인디케이터 클릭시 슬라이드 순차 이동 없이 점프함.
//애니메이션 내부처리용 변수
$sliderItems = $(this).find("li"), // 슬라이드 아이템들 객체 리스트
$itemsLength = $sliderItems.length, // 슬라이드 아이템 갯수
$num = 0, // 슬라이드 인덱스
$looper = null; // 슬라이드 인터벌 타이머 객체
$timeouts = [];
//애니메이션 타입별 트랜지션 기본값 설정
$animstart = {left: "100%"};
$animtrans = {left: "0"};
$animend = {left: "-100%"};
$animdirectcss = ".next";
$slideview = 'table'; //페이드 처리용 인액티브 슬라이드 순서
$transslideview = 'table'; //페이드 처리용 액티브 슬라이드 순서
// 디폴트 0 제외하고 나머지 애니메이션 타입만 설정
switch($animtype){
case 1:
$animdirectcss = ".prev";
break;
case 2:
$animstart = {opacity: 0};
$animtrans = {opacity: 1};
$animend = {opacity: 0};
$slideview = 'none';
break;
case 3:
$animstart = {opacity: 0};
$animtrans = {opacity: 1};
$animend = {opacity: 0};
$slideview = 'none';
$animdirectcss = ".prev";
break;
}
//커버 슬라이드 있으면
if ( $itemsLength > 1 ){
//add prev, next button
$this.append('<button type="button" class="prev"><span>이전</span></button><button type="button" class="next"><span>다음</span></button>');
//add indicator wrap
$this.append('<ol class="cover-slider-indicator"></ol>');
$looper = setLoop();//자동 루프
//add indicator item
for(let i=0;i<$itemsLength;i++){
var $element = $('<li index="'+i+'" class="'+(i==0?'active':'')+'"></li>');
//click event handler
$element.click(function(){
var $clicked_indicator = parseInt($(this).attr('index'));
if($num != $clicked_indicator){
var sliding_size = Math.abs($num - $clicked_indicator);
clearInterval($looper);//임시로 루프 죽이고
if(!$indicatorjump)
{
//슬라이드 순차 이동
for(let j = 0;j<sliding_size;j++){
(function(direction, index){
$timeouts.push(setTimeout(function(){
moveCascadeSlides(direction, index); //인디케이터 이동 갯수/방향만큼 빠르게 슬라이더 순차 이동. parameter : 방향, 현재기준 이동 인덱스
},$animateTime*index));
}
)(($num < $clicked_indicator ? 1:-1), j);
}
}else{
//슬라이드 점프
jumpCascadeSlides(($num < $clicked_indicator ? 1:-1), $num, $clicked_indicator); // 중간 슬라이드 건너뛰고 마지막 슬라이드로 바로 이동.
}
$looper = setLoop();//루프 재설정
}
});
$this.find('.cover-slider-indicator').append($element);
}
//add css property to slider
$sliderItems.css({
"position": "absolute",
"top": 0,
});
$sliderItems.eq($num).css(Object.keys($animtrans)[0], $animtrans[Object.keys($animtrans)[0]]).css('display', $transslideview);
$sliderItems.eq($num).siblings().css(Object.keys($animstart)[0], $animstart[Object.keys($animstart)[0]]).css('display', $slideview);
//add prev click event
$this.on("click", ".prev", function(){
if ( !$sliderItems.eq($num).is(":animated") ){
clearInterval($looper);//임시로 루프 죽이고
var $pnum=$num;
$sliderItems.eq($num).animate($animstart, $animateTime, function(){slideDisplay($pnum, $slideview);});
$sliderItems.eq($num).siblings().css(Object.keys($animend)[0], $animend[Object.keys($animend)[0]]);
$num = $num-1 < 0 ? $sliderItems.length-1 : $num-1;
moveSlide($num);
$($this).find('ol li').removeClass('active');
$($this).find('ol li').eq($num).addClass('active');
$looper = setLoop();//루프 재설정
}
});
//add next click event
$this.on("click", ".next", function(){
if ( !$sliderItems.eq($num).is(":animated") ){
clearInterval($looper);//임시로 루프 죽이고
var $pnum=$num;
$sliderItems.eq($num).animate($animend, $animateTime, function(){slideDisplay($pnum, $slideview);});
$sliderItems.eq($num).siblings().css(Object.keys($animstart)[0], $animstart[Object.keys($animstart)[0]]);
$num = $num+1 >= $sliderItems.length ? 0 : $num+1;
moveSlide($num);
$($this).find('ol li').removeClass('active');
$($this).find('ol li').eq($num).addClass('active');
$looper = setLoop();//루프 재설정
}
});
//slide rotate init
function setLoop(){
if($interval > 0){
return setInterval(
function autoScrollSlider(){
$($this).find($animdirectcss).trigger( "click" );
}, $interval
);
}
}
//animate indicator click
function moveCascadeSlides(direction, idx){
var $next_num = $num + direction;
var $pnum = $num;
$sliderItems.eq($num).animate(direction==1?$animend:$animstart, $animateTime, function(){slideDisplay($pnum, $slideview);});
$sliderItems.eq($num).siblings().css(Object.keys($animstart)[0], direction==1?$animstart[Object.keys($animstart)[0]]:$animend[Object.keys($animend)[0]]);
$sliderItems.eq($next_num).css('display', $transslideview).animate($animtrans, $animateTime);
$($this).find('ol li').removeClass('active');
$($this).find('ol li').eq($next_num).addClass('active');
$num = $next_num;
clearTimeout($timeouts[idx]);
}
//jump indicator click
function jumpCascadeSlides(direction, curr, dest){
var $next_num = $num + direction;
var $pnum = $num;
$sliderItems.eq(curr).animate(direction==1?$animend:$animstart, $animateTime, function(){slideDisplay(curr, $slideview);});
$sliderItems.eq(curr).siblings().css(Object.keys($animstart)[0], direction==1?$animstart[Object.keys($animstart)[0]]:$animend[Object.keys($animend)[0]]);
$sliderItems.eq(dest).css('display', $transslideview).animate($animtrans, $animateTime);
$($this).find('ol li').removeClass('active');
$($this).find('ol li').eq(dest).addClass('active');
$num = dest;
}
//animate 1 slide item
function moveSlide(newnum){
$sliderItems.eq(newnum).css('display', $transslideview).animate($animtrans, $animateTime);
$(".cover-slider .paging button").eq(newnum).addClass("current").siblings().removeClass("current");
}
//z-index change callback function
function slideDisplay(idx, state_display){
$sliderItems.eq(idx).css('display',state_display);
}
//add mobile touch
$this.on("touchstart", function(){
var touch = event.touches[0];
touchstartX = touch.clientX,
touchstartY = touch.clientY;
});
//add mobile touch end
$this.on("touchend", function(){
if( event.touches.length == 0 ){
var touch = event.changedTouches[event.changedTouches.length - 1];
touchendX = touch.clientX,
touchendY = touch.clientY,
touchoffsetX = touchendX - touchstartX,
touchoffsetY = touchendY - touchstartY;
if ( Math.abs(touchoffsetX) > 10 && Math.abs(touchoffsetY) <= 100 ){
if (touchoffsetX < 0 ){
$this.find(".next").click();
} else {
$this.find(".prev").click();
}
}
}
});
//set slider item index text
//각 슬라이더 텍스트에 1/3, 2/3, 3/3 과 같이 인덱스를 붙이고 싶은 경우 .index 클래스로 커버 슬라이더 <li> 태그 안에 <span class="index"></span> 식으로 태그를 넣어주면 자동으로 인덱스가 붙음
/*
$this.find('.index').each(function(idx){
$(this).html((idx+1)+'/'+$itemsLength)
})
*/
//set cover slider height
//커버 슬라이더(.cover-slider)에 높이 값이 정의되지 않거나 내부 슬라이더 이미지 크기에 맞춰 자동으로 높이를 맞출 필요가 있을 경우 아래 행이 그 기능을 함.
//csds에 .cover-slider 높이값이 강제 적용하는 경우 아래행을 리마크 해야함
//$(".cover-slider").find("ul").height( $sliderItems.eq($num).height() );
}//itemsLength > 1
});
}//coverSlider() End
반응형
'티스토리스킨 > 스킨 활용&패치' 카테고리의 다른 글
| 내 블로그는 어느정도 반응형인지 확인하기 (1) | 2019.11.26 |
|---|---|
| 사이드바 달력 위젯에 이번주, 일요일, 오늘 날짜 색상 입히기 (0) | 2019.11.23 |
| 티스토리 블로그 댓글 디자인팩1 배포합니다. (20) | 2019.10.27 |
| 신스킨에 구스킨 인피드 애드센스 적용 방식으로 글목록 애드센스를 붙이는 방법 (12) | 2019.09.26 |
| 티스토리 신스킨 커버 슬라이드 3.1 업데이트 안내 (2) | 2019.08.20 |
| 어포스트 배포 스킨 옵션 설정 안내 (38) | 2019.07.07 |
| 티스토리 신스킨 커버 슬라이드 3.0 기능 확장 버전 배포합니다. 페이드인아웃 및 좌우슬라이드 방향 지원 (11) | 2019.06.23 |
| 티스토리 블로그 사이드바에 방문자 통계 그래프 붙이기 (4) | 2019.05.15 |
| 누군가 당신의 티스토리 블로그 방문자 수를 훔쳐보고 있다. (0) | 2019.05.15 |
혹시 mintpaper나 기타 구 스킨 사용자분들께서는 적용후 슬라이드가 사라진다면 css에서 .cover-slider 를 찾아서 height: 360px; 값을 주면 정상 작동됩니다.
(3.0버전 게시글과 댓글에 나와있는 내용입니다.)
감사합니다. =^^=/