슬릭슬라이더 일시정지/재생, 현재페이지/전체페이지, 프로그레스바

<div id="index">
  <section class="mainSlider">
    <div class="slideWrap">
      <div><h2 class="forSR">메인슬라이드이미지1</h2></div>
      <div><h2 class="forSR">메인슬라이드이미지2</h2></div>
      <div><h2 class="forSR">메인슬라이드이미지3</h2></div>
    </div><!-- .slideWrap -->
    <div class="inner">
      <div class="text">
        <h2>메인 텍스트</h2>
        <p>서브 텍스트</p>
      </div><!-- .text -->
      <div class="slideController">
        <div class="pnp ps"><h2 class="forSR">일시정지 및 재생 버튼</h2></div><!-- .pnp -->
        <div class="pager">
          <p class="page"><i class="forSR">현재페이지</i>01</p><!-- .page -->
          <p class="total"><i class="forSR">전체페이지수</i>03</p><!-- .total -->
        </div><!-- .pager -->
        <div class="progress"><i></i></div><!-- .progress -->
        <div class="btn-LR"><h2 class="forSR">좌/우버튼</h2></div><!-- .btn-LR -->
      </div><!-- .slideController -->
    </div><!-- .inner -->
  </section><!-- .mainSlider -->
</div><!-- .index -->

/* index */
#index{width: 100%;}
#index .mainSlider{width: 100%; height: 100vh; position: relative;}
#index .mainSlider .slideWrap{position: absolute; z-index: -1; width: 100%; height: 100vh;}
#index .mainSlider .slideWrap div{background: url(/asset/images/index/visual-main-1.png) no-repeat center / cover; width: 100%; height: 100vh;}
#index .mainSlider .slideWrap div:nth-child(2){background-image: url(/asset/images/index/visual-main-2.png);}
#index .mainSlider .slideWrap div:nth-child(3){background-image: url(/asset/images/index/visual-main-3.png);}
#index .mainSlider .text{padding-top: 388px; color: #fff; margin-bottom: 43px;}
#index .mainSlider .text h2{font-size: 60px; font-weight: 800; line-height: 1; margin-bottom: 14px; text-shadow: 0 2px 4px rgba(0,0,0,.16);}
#index .mainSlider .text p{font-size: 30px; line-height: 1; text-shadow: 0 3px 6px rgba(0,0,0,.16);}
#index .mainSlider .slideController{display: flex; position: relative;}
#index .mainSlider .slideController .pnp{width: 20px; height: 20px; background: url(/asset/images/index/btn-pause.svg) no-repeat center / contain; cursor: pointer; margin-right: 20px;}
#index .mainSlider .slideController .pnp:hover{opacity: .8;}
#index .mainSlider .slideController .pnp.pl{background: url(/asset/images/index/btn-play.svg);}
#index .mainSlider .slideController .pager{display: flex; position: absolute; top: 1px; left: 74px;}
#index .mainSlider .slideController .pager p{font-size: 16px; color: #fff;}
#index .mainSlider .slideController .pager .total{position: absolute; top: 0; left: 180px;}
#index .mainSlider .slideController .progress{width: 133px; height: 2px; background: #BFBFBF; position: absolute; top: 9px; left: 105px;}
#index .mainSlider .slideController .progress i{width: 0; height: 2px; background: #fff; display: block;}
#index .mainSlider .slideController .btn-LR{}
#index .mainSlider .slideController .btn-LR .slick-arrow{width: 11px; height: 17px; background: url(/asset/images/index/btn-right.svg) no-repeat center / contain; display: inline-block; border: 0; text-indent: -9999px;}
#index .mainSlider .slideController .btn-LR .slick-arrow:hover{opacity: .8;}
#index .mainSlider .slideController .btn-LR .slick-arrow.slick-prev{margin-right: 240px; background-image: url(/asset/images/index/btn-left.svg)}

// 메인슬라이더
const mainSlider = $("#index .mainSlider .slideWrap")
mainSlider.slick({
    autoplay: true,
    appendArrows: $("#index .mainSlider .btn-LR"),
});
function mainSliderAni(){
    $('#index .mainSlider .progress i').animate( { width: '100%' }, 3000);
};
mainSliderAni();
mainSlider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
    let _num = (currentSlide ? currentSlide : 0) + 1;
    let _slidesToShow = slick.slickGetOption('slidesToShow');
    let _curPage = parseInt((_num-1)/_slidesToShow) + 1;
    let _totalPage =  parseInt((slick.slideCount-1)/_slidesToShow) + 1;
    $('#index .mainSlider .pager .page').text("0" + _curPage);
    $('#index .mainSlider .pager .total').text("0" + _totalPage);
    $('#index .mainSlider .progress i').stop().css( { width: '0' });
    mainSliderAni();
});
$("#index .mainSlider .pnp").click(function(){
    if($(this).hasClass("ps")) {
        $(this).removeClass("ps").addClass("pl");
        mainSlider.slick("slickPause");
        $('#index .mainSlider .progress i').stop();
    } else {
        $(this).removeClass("pl").addClass("ps");
        mainSlider.slick("slickPlay");
        mainSliderAni();
    }
});

 

 

2022.03.07 - [🕹 스크립트] - 슬릭슬라이더 애니메이션

슬릭슬라이더 애니메이션

2022.03.07 - [🕹 스크립트] - 슬릭슬라이더 이벤트 제어

슬릭슬라이더 이벤트 제어