티스토리 신스킨 커버 슬라이드 3.1 업데이트 안내
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