반응형
티스토리 신스킨 기능으로 제공되는 커버 기능중 하나인 커버 슬라이드의 확장 버전입니다.
기존 커버 슬라이드 기능에서 슬라이드 인디케이터와 자동 슬라이드 기능이 추가된 버전입니다.
1. 슬라이드 인디케이터
- 슬라이드 갯수만큼 자동으로 인디케이터 갯수가 센터 하단에 표시됨.
- 인디케이터를 클릭하면 해당 슬라이드로 애니메이션되면서 이동함.
- 인디케이터 클릭시 자동 슬라이드 기능은 일시적으로 멈춤.
2. 자동 슬라이드
스크립트에 별도로 자동 슬라이드 로테이션 간격 변수가 정의되어 있어 변수값 변경만으로 슬라이드 로테이션 간격을 조절할 수 있음.
레퍼런스 스킨에 포함된 자바스크립트 기준으로 몇가지 수정을 하면 바로 적용할 수 있습니다.
배포하는 스킨들은 자동 슬라이드 기능이 붙어있는 스킨들이 있습니다.
해당 스킨들은 아래 3번 내용을 참조해 불필요한 코드를 제거해주는 작업을 해줘야 합니다.
1. scrpt.js 파일의 coverSlider() 함수 수정사항
기존 coverSlider() 함수를 찾아 아래 소스의 함수로 대체합니다.
레퍼런스 스킨은 1번과 2번 함수 대체 및 CSS 추가만으로 잘 동작합니다.
함수 상단의 변수 설정 값중
$interval = 5000;// 슬라이드 이동 간격
$animateTime = 500; //슬라이드 이동시간
이것 두개만 우선 알면 됩니다.
interval은 슬라이드가 넘어가는 간격입니다. 단위는 밀리세컨드이며 1초는 1000 밀리세컨드이므로 소스의 기본 설정은 5초단위로 다음 슬라이드로 넘어갑니다.
animateTime은 슬라이드가 넘어가는 애니메이션 시간입니다. 500 밀리세컨드이므로 0.5초동안 이동 애니메이션이 되면서 다음 슬라이드로 넘어갑니다.
function coverSlider(){
$(".cover-slider").each(function(){
var $this = $(this), //현재 슬라이드 이너 객체
$sliderItems = $(this).find("li"), //슬라이드 아이템들 객체 리스트
$itemsLength = $sliderItems.length, //슬라이드 아이템 갯수
$num = 0, //슬라이드 인덱스
$looper = null; //슬라이드 인터벌 타이머 객체
$interval = 5000;// 슬라이드 이동 간격
$animateTime = 500; //슬라이드 이동시간
$timeouts = [];
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>');
$looper = setLoop();
//add indicator
$this.append('<ol class="cover-slider-indicator"></ol>');
for(let i=0;i<$itemsLength;i++){
var $element = $('<li index="'+i+'" class="'+(i==0?'active':'')+'"></li>');
$element.click(function(){
var $clicked_indicator = parseInt($(this).attr('index'));
if($num != $clicked_indicator){
var sliding_size = Math.abs($num - $clicked_indicator);
clearInterval($looper);
for(let j = 0;j<sliding_size;j++){
(function(direction, index){
$timeouts.push(setTimeout(function(){
moveCascadeSlides(direction, index);
},$animateTime*index));
}
)(($num < $clicked_indicator ? 1:-1), j);
}
$looper = setLoop();
}
});
$this.find('.cover-slider-indicator').append($element);
}
//set slider item index text
$this.find('.index').each(function(idx){
$(this).html((idx+1)+'/'+$itemsLength)
})
//set cover slider height
$(".cover-slider").find("ul").height( $sliderItems.eq($num).height() );
//add css property to slider
$sliderItems.css({
"position": "absolute",
"top": 0,
});
$sliderItems.eq($num).siblings().css("left","100%");
//add prev click event
$this.on("click", ".prev", function(){
if ( !$sliderItems.eq($num).is(":animated") ){
$sliderItems.eq($num).animate({ left: "100%" }, $animateTime ).siblings().css("left","-100%");
$num = $num-1 < 0 ? $sliderItems.length-1 : $num-1;
moveSlide();
$($this).find('ol li').removeClass('active');
$($this).find('ol li').eq($num).addClass('active');
}
});
//add next click event
$this.on("click", ".next", function(){
if ( !$sliderItems.eq($num).is(":animated") ){
$sliderItems.eq($num).animate({ left: "-100%" }, $animateTime ).siblings().css("left","100%");
$num = $num+1 >= $sliderItems.length ? 0 : $num+1;
moveSlide();
$($this).find('ol li').removeClass('active');
$($this).find('ol li').eq($num).addClass('active');
}
});
//slide rotate init
function setLoop(){
return setInterval(
function autoScrollSlider(){
$($this).find('.next').trigger( "click" );
}, $interval
);
}
//animate indicator click
function moveCascadeSlides(direction, idx){
var next_num = $num + direction;
$sliderItems.eq($num).animate({ left: (-100*direction)+"%" }, $animateTime ).siblings().css("left",(100*direction)+"%");
$sliderItems.eq(next_num).animate({ left: "0" }, $animateTime );
$($this).find('ol li').removeClass('active');
$($this).find('ol li').eq(next_num).addClass('active');
$num = next_num;
clearTimeout($timeouts[idx]);
}
//animate 1 slide item
function moveSlide(){
$sliderItems.eq($num).animate({ left: "0" }, $animateTime );
$(".cover-slider .paging button").eq($num).addClass("current").siblings().removeClass("current");
}
//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();
}
}
}
});
}
});
}
2. css 추가사항
인디케이터 관련 CSS만 추가하면 되므로 기존 커버슬라이더 CSS 위치 근처에 붙여넣어서 사용하면 됩니다.
.cover-slider-indicator{
position: absolute;
left: 50%;
transform: translateX(-50%);
list-style: none;
text-align: center;
bottom: 20px;
}
.cover-slider-indicator li{
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 0 5px;
transition: all 0.5s ease-in-out;
}
.cover-slider-indicator li.active{
background-color: #fff;
}
3. 배포하고 있는 스킨들의 추가 수정사항
제가 배포하는 스킨들은 일부 변경된 부분이 있기 때문에 추가 수정할 부분이 있습니다.
script.js 에서 아래 부분을 찾습니다.
if ( $(".cover-slider").length ){
coverSlider();
setInterval(
function autoScrollSlider(){
$( ".next" ).trigger( "click" );
}, 4000);
}
인디케이터가 붙기 전에 자동 슬라이드만 구현해서 붙여넣은 스킨에는 이 코드가 들어가 있습니다.
"coverSlider();" 함수 호출행만 남기고 모두 지웁니다.
위의 개선된 함수에서 자동 슬라이드 기능이 모두 구현되어 있기 때문에 불필요합니다.
반응형
Comments