slick with Dragdealer

FRONTEND / UI LIBRARY

🔗 슬라이더 동기화: slick.js와 Dragdealer를 연결하여 커스텀 프로그레스 바 구현

웹사이트에서 슬라이더(캐러셀)는 흔하지만, 드래그 가능한 컨트롤 바(Slider Bar)와 슬라이더를 완벽하게 동기화하는 것은 고급 기술입니다. 이 글은 인기 있는 slick.js 슬라이더와 Dragdealer를 결합하여 양방향 제어 시스템을 구축하는 방법을 분석합니다.

📑 목차

• 1. HTML 구조: 슬라이더와 드래그 바
• 2. JavaScript (jQuery): 슬라이더 동기화 로직
• 3. 결론: 양방향 동기화의 완성

1. HTML 구조: 슬라이더와 드래그 바

슬라이더를 위한 `.center`와 드래그 바를 위한 `#rolling_Bar` 및 `.handle` 구조가 필요합니다. `Dragdealer`는 내부 `.handle` 요소를 드래그하여 `#rolling_Bar` 영역 내에서 움직이게 합니다.

<!-- (1) slick 슬라이더 영역 -->
<div class="content">
    <div class="center">
        <div><div class="slide prod"><a href="#">... (슬라이드 내용 1) ...</a></div></div>
        <div><div class="slide prod"><a href="#">... (슬라이드 내용 2) ...</a></div></div>
        <div><div class="slide prod"><a href="#">... (슬라이드 내용 3) ...</a></div></div>
    </div>
</div>

<!-- (2) Dragdealer 바 영역 -->
<div id="rolling_Bar" class="rolling_Bar dragdealer" >
    <span class='handle'>
        <img id="barImage" src="./images/rolling_bar_on.png" alt="롤링on이미지" />
    </span>
</div>

2. JavaScript (jQuery): 슬라이더 동기화 로직

핵심은 두 플러그인 간의 **이벤트 리스너**와 **API 호출**을 통해 상태를 서로 업데이트하는 것입니다.

<script type="text/javascript"> 
    var slick; // slick 인스턴스
    var drag; // Dragdealer 인스턴스

    $(document).ready(function(){
        var count = $(".slide").length; // 전체 슬라이드 개수 (steps 설정에 사용)
        
        // 1. slick 슬라이더 초기화
        slick = $('.center').slick({
            arrows: false,
            centerMode: true,
            infinite: true,
            centerPadding: '230px',
            slidesToShow: 1,
            autoplay : true,
            autoplaySpeed : 100000 // 재생 속도를 매우 길게 설정 (거의 정지 상태로 사용)
        }); 

        // 2. Dragdealer 초기화
        drag = new Dragdealer('rolling_Bar',{
            x: 0,
            steps: count, // 슬라이드 개수만큼 스텝 설정
            callback : function(x,y){
                // (A) Dragdealer -> slick 동기화 (사용자가 바를 조작했을 때)
                var currentSlide = drag.getStep()[0] - 1 ;
                if($('.center').slick('slickCurrentSlide') != currentSlide){
                    $('.center').slick('slickGoTo', currentSlide);
                }
            }
        }); 

        // 3. slick 이벤트 바인딩 (slick -> Dragdealer 동기화)
        $(".center").on('afterChange', function(event, slick, currentSlide){
            // (B) slick -> Dragdealer 동기화 (슬라이더가 변경되었을 때)
            drag.setStep($('.center').slick('slickCurrentSlide') + 1)
        });

        // 4. Dragdealer 핸들 크기 초기 설정
        $("#barImage").width(drag.getStepWidth())

    });
</script>

2.1. Dragdealer 초기화 (`steps`와 `callback`)

• `steps: count`: Dragdealer 바를 **슬라이드 개수**만큼의 '단계'로 나눕니다. (예: 슬라이드 3개면, 바를 3등분하여 각 단계에 멈춥니다.)
• **콜백 함수 (A):** 사용자가 바를 드래그하여 멈출 때 실행됩니다. `drag.getStep()[0]`으로 현재 단계를 얻은 후, `slickGoTo` API를 사용하여 해당 슬라이드로 이동시킵니다. (인덱스 보정: `getStep()`은 1부터 시작, `slickGoTo`는 0부터 시작하므로 `-1` 처리)

2.2. slick 이벤트 바인딩 (`afterChange`)

• **`afterChange` 이벤트 (B):** slick 슬라이더가 이동을 마칠 때마다 발생합니다.
• `drag.setStep(...)`: `slickCurrentSlide()`로 현재 슬라이더 인덱스를 얻은 후, Dragdealer의 `setStep` API를 사용하여 드래그 바의 위치를 해당 단계로 이동시킵니다. (인덱스 보정: `setStep`은 1부터 시작하므로 `+1` 처리)

3. 결론: 양방향 동기화의 완성

이 코드는 **슬라이더의 상태 변경 → 드래그 바 업데이트** (B) 와 **드래그 바의 조작 → 슬라이더 이동** (A)이라는 두 가지 핵심 로직을 통해 완벽하게 양방향으로 동기화된 커스텀 UI를 구축했습니다.

💡 Tip: 이 방식은 디자인 제약이 많은 프로젝트에서 슬라이더의 기본 UI를 대체하고, 사용자에게 새로운 형태의 탐색 경험을 제공하는 데 유용합니다.