bxSlider custom Botton

FRONTEND / JQUERY

jQuery bxSlider: 나만의 커스텀 버튼(Prev/Next/Stop)으로 슬라이더 제어하기

bxSlider의 기본 스타일을 벗어나, 별도로 제작한 버튼 이미지나 HTML 요소로 슬라이더를 완벽하게 제어하는 방법을 알아봅니다. 인스턴스 변수를 활용한 API 호출 패턴을 실무 예제로 정리했습니다.

📑 목차

• 1. HTML 구조: 슬라이더와 제어 버튼 분리
• 2. 핵심 로직: 인스턴스 저장 및 API 호출
• 3. 전체 JavaScript 구현 코드
• 4. 요약 및 주의사항

1. HTML 구조: 슬라이더와 제어 버튼 분리

가장 먼저 해야 할 일은 bxSlider가 적용될 리스트(ul > li)와 이를 제어할 버튼들을 HTML 상에 배치하는 것입니다. 이때 제어 버튼들은 bxSlider 컨테이너 외부에 있어도 상관없으며, 고유한 ID를 부여하여 스크립트에서 식별할 수 있게 합니다.

<div class="slider-wrapper">
    <!-- 1. 커스텀 컨트롤 버튼 영역 -->
    <div class="custom-controls">
        <button type="button" id="btn_prev">이전</button>
        <button type="button" id="btn_stop">정지/재생</button>
        <button type="button" id="btn_next">다음</button>
    </div>

    <!-- 2. bxSlider가 적용될 슬라이드 영역 -->
    <ul class="bxslider">
        <li><img src="image1.jpg" alt="슬라이드 1"></li>
        <li><img src="image2.jpg" alt="슬라이드 2"></li>
        <li><img src="image3.jpg" alt="슬라이드 3"></li>
    </ul>
</div>

2. 핵심 로직: 인스턴스 저장 및 API 호출

bxSlider를 초기화할 때 가장 중요한 포인트는 **반환되는 인스턴스를 변수에 저장**하는 것입니다. 저장된 변수를 통해 goToNextSlide, stopAuto 등의 내장 메서드를 호출하여 슬라이더를 외부에서 조작할 수 있습니다.

또한, bxSlider가 기본적으로 생성하는 컨트롤러(좌우 화살표, 페이저)가 방해되지 않도록 옵션에서 비활성화(false) 처리해야 합니다.

3. 전체 JavaScript 구현 코드

아래 코드는 슬라이더를 초기화하고, 각 버튼 클릭 시 해당 기능을 수행하도록 이벤트를 바인딩하는 전체 로직입니다. 특히 정지/재생 토글 로직을 유심히 살펴보세요.

$(document).ready(function(){
    
    // 1. 슬라이더 인스턴스를 변수(mySlider)에 저장
    var mySlider = $('.bxslider').bxSlider({
        auto: true,          // 자동 재생 켜기
        speed: 500,          // 전환 속도
        pager: false,        // 기본 페이저 숨김
        controls: false,     // 기본 화살표 숨김
        autoControls: false  // 기본 재생/정지 버튼 숨김
    });

    // 2. [이전] 버튼 이벤트 바인딩
    $('#btn_prev').on('click', function(){
        mySlider.goToPrevSlide();  // 이전 슬라이드로 이동
        mySlider.startAuto();      // (선택사항) 클릭 후 자동재생 재시작
        return false;
    });

    // 3. [다음] 버튼 이벤트 바인딩
    $('#btn_next').on('click', function(){
        mySlider.goToNextSlide();  // 다음 슬라이드로 이동
        mySlider.startAuto();      // (선택사항) 클릭 후 자동재생 재시작
        return false;
    });

    // 4. [정지/재생] 토글 버튼 로직
    var isPlaying = true; // 현재 재생 상태 플래그

    $('#btn_stop').on('click', function(){
        if(isPlaying) {
            mySlider.stopAuto();   // 재생 중이면 -> 정지
            $(this).text('재생');  // 버튼 텍스트 변경
            isPlaying = false;
        } else {
            mySlider.startAuto();  // 정지 중이면 -> 재생
            $(this).text('정지');  // 버튼 텍스트 변경
            isPlaying = true;
        }
        return false;
    });

});

4. 요약 및 주의사항

• 변수 저장 필수: var slider = $('.class').bxSlider(); 형태로 선언해야 메서드를 사용할 수 있습니다.
• 기본 UI 제거: 디자인 충돌을 막기 위해 controls, pager 옵션을 false로 설정하세요.
• 자동 재생 유지: 사용자가 수동으로 버튼을 클릭하면 자동 재생이 멈출 수 있습니다. 필요하다면 클릭 이벤트 내부에 startAuto()를 추가하여 UX를 개선하세요.

💡 Tip: 이 방식은 bxSlider뿐만 아니라 Swiper.js, Slick 등 대부분의 슬라이더 라이브러리에서 공통적으로 사용되는 API 제어 패턴입니다.