통합검색

Javascript

[jQuery] slick 사용시 prev/next 버튼 해당하는 경우에만 노출

  • 2025.02.27 19:29:16


slick 사용시 arrows 옵션을 true 로 설정하면 prev/next 버튼이 노출되는데,
첫번째 슬라이드에서는 prev 버튼을 숨기고, 마지막 슬라이드에서는 next 버튼을 숨기는 방법.


[!]jQuery[/!] 
아래와 같이 beforeChange 메소드를 통해 구현 가능하다.
  
let $slider = $('.prdt_box .lef .roll_wrap ul.roll')
$slider = $('.prdt_box .lef .roll_wrap ul.roll').slick({
    'fade' : false,
    'dots' : false,
    'arrows' : true,
    .......
});

function updateArrows(nextSlide) {
    var slickInstance = $slider.slick('getSlick');

    // slickInstance가 존재하는지 확인
    if (!slickInstance) return;

    var totalSlides = slickInstance.slideCount - slickInstance.options.slidesToShow;

    $('.slick-prev').toggle(nextSlide !== 0);
    $('.slick-next').toggle(nextSlide < totalSlides);
}

// 슬라이드 변경 직전에 실행
$slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    updateArrows(nextSlide);
});

// 초기 상태 업데이트 (슬릭이 완전히 로드된 후 실행)
$slider.on('init', function (event, slick) {
    updateArrows(0);
});

// 슬릭 초기화 강제 실행 (init 이벤트 트리거)
updateArrows(0);

 
리스트