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); |