slisk 슬라이드 세로 네비게이션 (Slick Slider Vertical asNavFor)

slick.js

 

See the Pen slisk 슬라이드 세로 네비게이션 (Slick Slider Vertical asNavFor) by kimyangsun (@kimyangsun) on CodePen.

 

slisk 슬라이드 세로 네비게이션 (Slick Slider Vertical asNavFor)

코드펜 예제 코드입니다.

아래는 js 코드입니다.

$('.slider-main').slick({
  slidesToShow: 1,
  arrows: false,
  asNavFor: '.slider-nav',
  vertical: true,
  autoplay: true,
  verticalSwiping: true,
  centerMode: true
});

$('.slider-nav').slick({
  slidesToShow: 4,
  asNavFor: '.slider-main',
  vertical: true,
  focusOnSelect: true,
  autoplay: false,
  centerMode: true
});

$(window).on('resize orientationchange', function() {
  if ($(window).width() > 1200) {
    $('.slider-nav').slick('unslick');
    $('.slider-nav').slick({
      slidesToShow: 4,
      asNavFor: '.slider-main',
      vertical: true,
      focusOnSelect: true,
      autoplay: false,
      centerMode: true
    });
  }
});