본문 바로가기

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

티스토리 신스킨 커버 슬라이드 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 초기화 상태에서 테스트해보니 됐다가 안됐다가 하네요..)

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

      패치되었습니다.

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

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

  • 안녕하세요. 스킨 계속 잘 쓰고 있습니다. 슬라이더 관련 몇가지 질문드립니다.

    1. 슬라이더 인디케이터를 1번에서 5번으로 누르면 1,2,3,4,5 단계별로 이동하는데, 이걸 1->5 한방에 이동하게 할 수 있을까요?

    2. 슬라이더 이미지에 hover하면 배경색 변경을 적용했는데, 인디케이터에 마우스를 올리면 풀리더라구요. 인디케이터나 다음/이전 버튼 등이 z축에서 더 위에 올라와 있는 거 같아서 아에 이미지 밑으로 옮기려고 하니까, 이미지를 벗어나니까 사라집니다. 해결 방법이 있을까요??

    • 1. 가능은 할텐데 스크립트 손을 많이 봐야 합니다.
      슬라이더 순차이동 의도가 애초에 중간에 뭔가 있는걸 사용자에게 인지시키는 의도가 있는 것이라, 건너뛰게 할 수 있다고 해도, 배포 슬라이더에 적용할지는 모르겠습니다.
      시간 나는데로 코드를 손봐서 건너뛰는 코드를 선택적으로 쓸 수 있게 추가해드리겠습니다.

      2. 이해하신대로 구조상 슬라이더 위에 컨트롤 버튼들이 위치해서 발생합니다.
      순서에 따른 구조적인 문제라 해결이 가능할지는 테스트를 좀 해봐야 할 것 같습니다.
      이전 다음 버튼보다는 인디케이터가 영역상 겹치게 크기가 잡혀서 그런것이고, 인디케이터 영역 크기를 정밀하게 배치하면 되기는 하는데, 그렇게 하면 다양한 가변 레이아웃을 맞추기가 어려워집니다.
      개별 맞춤을 하자면 쉬운 문제지만 범용 레이아웃에 문제 없이 쓰게 만들자면 구조적인 제약이 생기는 어쩔 수 없는 한계가 조금씩 있게 됩니다.
      1번 업데이트 하면서 레이아웃을 조금 세밀하게 조정을 해서 같이 업데이트를 하도록 하겠습니다.

    • 다소 개인적인 문의일수도 있는데 신경 써주셔서 감사합니다.

    • 1.
      커버 슬라이드 3.1 버전이 새로 올라갔습니다.

      https://apost.kr/448

      코드 손보시는 것 정도는 할줄 아시는 것 같아서 설명 보시면 대충 이해되지 싶습니다.

      2.
      마우스 오버 처리는 css를 조금 고급스럽게 쓸 수 있어야 대응이 됩니다.

      .cover-slider ul li a:hover

      여기에 마우스 오버시 30% 반투명 검정배경을 입히셨는데

      indidator가 ul과 동급이기 때문에 indicator에 마우스오버가 되면 ul 외부로 벗어나므로 ul 하위인 a:hover가 안먹게 됩니다.

      .cover-slider ul li a:hover

      .cover-slider:hover ul li a
      로 바꿔서 전역으로 커버슬라이더에 마우스 오버가 먹게 바꿔보시기 바랍니다.

      사이트가 예쁩니다.
      스킨 만든 사람이 무안할 정도로 예쁘게 다듬었네요...

    • 감사합니다. 답변 주신 내용으로 잘 수정했습니다. 태그를 뜯어가면서 익히다보니 hover는 a와 세트로 a:hover만 되는줄 알았는데 또 하나 배워갑니다.. 항상 좋은 스킨과 어포스트 사이트 레이아웃, 팁 등을 보면서 영감을 얻어 갑니다.. 감사드립니다!


닫기