[자바스크립트플러그인]slick progressbar 만들기

[CSS] - [CSS]animation - 애니메이션 효과 중지했다가 다시 시작하기

[javascript] - [JAVASCRIPT/JQUERY]이미지슬라이드 플러그인 slick 옵션 설정하는 법(사용법)

 

 

 

progressbar1 - 1개의 슬라이드에 대한 progress

 

슬릭 옵션중 pauseOnHover:true를 이용해서 

마우스를 hover했을 때 자동 슬라이드가 멈추도록 설정했습니다. 

 

pauseOnHover:true

 

CSS를 이용해 마우스가 hover되면 progress bar 의 애니메이션도 멈추도록 합니다.

 

animation-play-state: paused;

 

slick의 이벤트

afterChange(슬라이드 아이템이 바뀌고 나서) beforeChange(슬라이드 아이템 바뀌기 전에) 애니메이션을 조절해줍니다. 

$(".slick-slider").on('afterChange',function(){
    $(".pro-bar").addClass('pro-ani');
});
$(".slick-slider").on('beforeChange',function(){
   $(".pro-bar").removeClass('pro-ani');
});

 

---

+ 

기존에 위와같은 방법을 쓸 경우 

 

slick-slider 에서의      

pauseOnHover:true 를  설정하면

이미지 위에 마우스가 있으면 설정된 이동시간도 멈추고 애니메이션도 멈춘다.

 

이와 세트는 css에서 

.slider-box:hover .pro-bar{ animation-play-state: paused; } 를 이용해

단순히 progressbar의  애니메이션을 멈췄다가 진행한다 

.pro-bar 에 있는 애니메이션의 경우 5s 로 시간설정이 되어있으며, hover로 인해 애니메이션을 멈추더라도(animation-play-state: paused;) 애니메이션 지속 시간은 계속 진행된다. 

 

즉 두개의 시간이 달라진다. 

 

그래서 스크립트를 이용해 아래와 같이 변경해보았다. 

 

 

 

 

 

 

 

애니메이션이 시작되면 인터벌을 이용해 1초마다 duration=5로 시작하여 1씩 감소한다. (남은시간측정)

 timeSet = setInterval(function(){
           duration--;
         },1000)

 

마우스가 올라가면 올라간시간을 초로 측정한다. 좀더 섬세하게 하고싶다면 인터벌 시간을 500으로 설정해 0.5씩 늘려도 가능. 

 interval = setInterval(function(){
     time++;
   },1000)

 

마우스가 떠나면 애니메이션 시간을 변경해준다 

  $(".pro-ani").css({
     'animation-duration': duration+ time +'s',
   })

 

이때 다음 동작을  위해 clearInterval 과 변수(dutaion, time) 초기화에 신경써주어야한다.

---

 

 

codepen.io/gahyun/embed/poEJVrp?height=468&theme-id=light&default-tab=result"

 

progressbar2 - 전체 슬라이드에대한 progressbar

 

전체 슬라이드 4개가 모두 끝나야 100% 길이가 되는 프로그래스 바로 

 

1개의 슬라이드당 25% 씩 증가한다.

 

현재슬라이드의 index는 

var curIdx = $(".slick-active").attr("data-slick-index");

를 통해 가져온다 

 

 

$(".slick-slider").on('afterChange',function(){
  var curIdx = $(".slick-active").attr("data-slick-index");
  curIdx = parseInt(curIdx);
     $(".pro-bar").animate({
        "width": (25 * (curIdx+1))+"%"
     },300);
});