[script] slick 슬라이드 visual 영역(arrow, dots)

slick 슬라이드를 이용한 visual 영역

이미지 scale 축소되는  애니메이션효과.

 

slick 슬라이드

next prev 버튼 - 옵션 arrows

page 버튼 - 옵션 dots

 

 

slick script 효과는 코드펜에서 찾아서 적용해봤습니다! 

$(document).ready(function(){
  var $slick_carousel = $(".slide_wrap");
  $slick_carousel.on('init', function(event, slick) {			
  	$(".slide_li").eq(0).addClass("active");
  });
  $slick_carousel.on('afterChange', function(event, slick, currentSlide){
    $(".slide_li").removeClass("active");
    $(this).find(".slide_li").eq(currentSlide).addClass("active")
  });
  
  $('.slide_wrap').slick({
    autoplay: true,
    fade : true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    pauseOnHover:false,
    autoplaySpeed: 5000,
    dots: true
    });
  $(".slide_wrap").slick.refresh()
});

<div id="wrap">
  <div class="visual">
    <ul class="slide_wrap">
      <li class="slide_li">
        <img src="이미지 주소"  style="height:950px;">
        <p class="slide_txt">TISTORY</p>
      </li>
      <li class="slide_li">
        <img src="이미지 주소"  style="height:950px;">
        <p class="slide_txt">TISTORY</p>
      </li> 
      <li class="slide_li">
        <img src="이미지 주소"  style="height:950px;">
        <p class="slide_txt">TISTORY</p>
      </li>
    </ul>
  </div>
</div>

.visual{position:relative; width:100%; height:960px; }
.visual .slide_wrap{position:relative; width:100%; }
.visual .slide_wrap li{position:relative; }

/* prev, next 버튼 css*/
.visual button.slick-arrow{font-size:0; position:absolute; left:50%; top:50%;  margin-top:-33px;  width:66px; height:66px; z-index:999; outline:0;}
.visual button.slick-prev{margin-left:-700px; background:url("prev 화살표이미지 주소") center no-repeat;}
.visual button.slick-prev:hover{margin-left:-700px; background:url("hover 했을 때 prev 화살표이미지 주소") center no-repeat;}
.visual button.slick-next{margin-left:643px; background:url(" next 화살표이미지 주소") center no-repeat;}
.visual button.slick-next:hover{margin-left:643px; background:url("hhover 했을 때 next 화살표이미지 주소") center no-repeat;}
.visual .slide_wrap .slide_txt{position:absolute; left:50%; top:50%; transform:translate(-50% , -50%); font-size:50px; line-height:1.8; font-weight:bold; color:red; text-align:center;  z-index:900;}

/*pager css*/
.visual .slick-dots{position:Absolute; right:265px; bottom:30px; height:10px; font-size:0;}
.visual .slick-dots li{display:inline-block; width:10px; height:10px; border-radius:50%; background-color:red; margin-left:20px; text-indent:-9999px;}
.visual .slick-dots li.slick-active:before {content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; border-radius:50%;border:1px solid red;}

/*슬라이드 이미지 scale css*/
.slide_li > img {-ms-transform: scale(1.2,1.2); /* IE 9 */
-o-transform: scale(1.2,1.2); /* IE 9 */
-moz-transform: scale(1.2,1.2); /* IE 9 */
-webkit-transform: scale(1.2,1.2); /* Chrome, Safari, Opera */
 transform: scale(1.2,1.2);
-webkit-transition:transform 5000ms  ease-in-out ; /* Safari */
-moz-transition:transform 5000ms ease-in-out ; /* Safari */
-o-transition:transform 5000ms ease-in-out ; /* Safari */
-ms-transition:transform 5000ms ease-in-out ; /* Safari */
transition:transform 5000ms ease-in-out ;}

.slide_li.active > img{
-ms-transform: scale(1,1); /* IE 9 */
-o-transform: scale(1,1); /* IE 9 */
-moz-transform: scale(1,1); /* IE 9 */
-webkit-transform: scale(1,1); /* Chrome, Safari, Opera */
transform: scale(1,1);	
}