본문 바로가기

티스토리스킨/팁.활용.확장

티스토리 신스킨 커버 슬라이드 3.0 기능 확장 버전 배포합니다. 페이드인아웃 및 좌우슬라이드 방향 지원

레퍼런스 스킨과 함께 배포하는 커버슬라이드의 확장 버전입니다.


제가 배포하는 스킨 기준으로 제작하기 때문에 화살표 아이콘 등을 폰트어썸으로 사용합니다.

기존 스킨, 또는 다른 스킨에 적용시 아이콘 부분은 직접 패치해야 합니다.






3.0 개선 기능 안내 


1. 자동 슬라이드 방향 좌우 지원


기존 커버 슬라이드는 오른쪽에서 왼쪽으로 이동하는 슬라이드만 지원합니다.

반대로 왼쪽에서 오른쪽으로 이동하는 타입이 지원됩니다.



2. 페이드인 아웃 애니메이션 지원


좌우 슬라이드 이동 대신 페이드 인 아웃으로 투명/불투명 으로 슬라이드가 교체됩니다.



3. 환경 설정값 지원


아래 소스 상단을 보면 


            $interval = 5000; // 슬라이드 이동 간격 - 기본설정 5000(5초), 0이면 멈춤, 슬라이드 교체 간격
            $animateTime = 500; // 슬라이드 이동시간 - 기본설정 500(0.5초), 커지면 느리게 애니메이션
            // 슬라이드 애니메이션 타입
            $animtype = 0; // 0:오른쪽방향 이동(next클릭), 1: 왼쪽방향 이동(prev클릭), 2: 페이드인아웃 오른쪽 방향(next클릭), 3: 페이드인아웃 왼쪽 방향(prev클릭)


부분이 있습니다.

슬라이드 교체 간격, 애니메이션/트랜지션 시간

그리고, 1, 2번 지원을 위한 애니메이션 타입 설정을 간편하게 할 수 있습니다.




제가 배포하는 스킨 기준으로

script.js 파일의

coverSlider() 함수를 찾아서 아래 소스로 대체하면 바로 개선된 기능을 사용할 수 있습니다.


자바스크립트 코딩이 가능하면

소스에 코멘트를 달아놨으므로 찾아서 수정해서 사용하면 됩니다.

한글로 코멘트를 달아놓은 부분은 사용자 설정이 필요하거나 가능한 부분이므로 확인을 한 후 적용하시기 바랍니다.



커버슬라이드 3.0 적용된 스킨 예


최근 스킨 -> 056. 반응형 체리블로썸[클릭]


구 스킨 및 레퍼런스 스킨 - 044. 반응형 민트페이퍼[클릭]




- 업데이트 모두 반영된 풀소스


function coverSlider(){
        $(".cover-slider").each(function(){
            
            var $this = $(this); // 현재 슬라이드 이너 객체

            //환경설정
            $interval = 5000; // 슬라이드 이동 간격 - 기본설정 5000(5초), 0이면 멈춤, 슬라이드 교체 간격
            $animateTime = 500; // 슬라이드 이동시간 - 기본설정 500(0.5초), 커지면 느리게 애니메이션
            // 슬라이드 애니메이션 타입
            $animtype = 0; // 0:오른쪽방향 이동(next클릭), 1: 왼쪽방향 이동(prev클릭), 2: 페이드인아웃 오른쪽 방향(next클릭), 3: 페이드인아웃 왼쪽 방향(prev클릭)

            //애니메이션 내부처리용 변수
            $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
                $this.append('<ol class="cover-slider-indicator"></ol>');

                $looper = setLoop();//자동 루프

                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);
                }
                //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]);
                }
                
                //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





- 5월 24일 변경된 내용

풀소스 하단쪽에 아래 내용이 추가되었습니다.


1. 커버 슬라이더 클래스(.cover-slider)에 높이 값이 지정되지 않은 경우 내부 첫번째 슬라이더 이미지 높이로 자동 설정해주는 코드(기본 활성화 상태로 배포)

커버 슬라이더(.cover-slider)에 높이 값이 정의되지 않거나 내부 슬라이더 이미지 크기에 맞춰 자동으로 높이를 맞출 필요가 있을 경우 아래 행이 그 기능을 함.

css에 .cover-slider 높이값이 강제 적용하는 경우 아래행을 리마크 해야함



2. 각 슬라이더 텍스트에 1/3, 2/3, 3/3 과 같이 인덱스를 붙이고 싶은 경우 .index 클래스로 커버 슬라이더 <li> 태그 안에 <span class="index"></span> 식으로 태그를 넣어주면 자동으로 인덱스가 붙도록 해주는 코드(주황색 코드 - 위 아래 /* */ 있는 행을 지우면 활성화 됨)


                //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() );


  • 기다리던 자료라 먼저 댓글달고 적용하러 갑니다. 항상 좋은 스킨과 자료에 감사드립니다.

    • 저는 mintpaper 스킨을 사용중인데요,

      coverSlider부분을 본문꺼를 복붙하니까 아에 슬라이더부분이 사라져버립니다.

      최신 스킨인 cherryblossom스킨에서 수정해보니까 정상 작동했구요.

      mintpaper스킨은 수정안된 원본 버전에서 복붙해도 동일하게 사라졌습니다.

      뭐가 다른가 싶어서 coverSlider로 찾다가 아래에 if ( $(".cover-slider").length ){ 부분이 다르긴하던데

      이 부분을 같게 맞춰줘도 차이는 없었습니다.

      원인을 알 수 있을까요??

    • 레퍼런스 스킨 기반으로 만든 커버슬라이더는 자바스크립트에서 첫번째 슬라이더 높이를 기준으로 전체 커버슬라이더 높이값을 자동으로 지정하는 자바스크립트 코드(1줄)가 있습니다.

      최근 제작하는 새스킨에서는 커버슬라이더에 css로 아얘 높이값을 줍니다.
      그래서 이 코드가 삭제되었고

      최근 제작하는 스킨 기준으로 커버슬라이더를 만들어서 위 코드가 필요한 구 스킨들에서는 슬라이더는 동작하지만 높이값이 없어서 화면에서는 보이지 않는 현상이 있는 것입니다.

      2가지 해결 방법이 있습니다.

      1. 위 내용과 관련한 코드 추가된 내용과 설명이 커버슬라이더 3.0 글에 반영되어 있습니다. 보시고 코드 복사해서 재적용 하면 됩니다.

      2. css에서 .cover-slider 를 찾아서
      height: 360px;
      속성을 주면 동일하게 커버슬라이더가 보이게 됩니다.
      새로 추가된 자바스크립트 코드가 하는 역할이 이걸 동적으로 적용해주는 것입니다.

      레퍼런스 용으로 민트페이퍼 스킨은 커버슬라이더 3.0을 적용해서 패치를 했습니다. 동작 확인까지 했습니다.

    • 1번 방법으로 수정된 코드를 적용하니 정상적으로 표시가 됩니다. 감사합니다.

      다만 버그인지 모르겠는데 제보 하나 드립니다.

      페이드모드 적용시에 더보기 버튼 hover기능이 작동하지 않는 것 같습니다. 기존처럼 다시 슬라이더모드를 적용하니 정상적으로 hover 색변화가 되었습니다.

      (mintpaper 초기화 상태에서 테스트해보니 됐다가 안됐다가 하네요..)

    • 버그입니다.
      페이드아웃된 안보이는 앞쪽 슬라이드가 자리를 차지해서 나타나는 현상입니다.

      패치되었습니다.

      함수 복사해서 재적용하면 깨끗하게 동작할겁니다.

    • 버그였었군요. 수정된 코드로 잘 적용했습니다. 감사합니다..!