[jQuery] 반응형 bxSlider

 

bxSlider

다양한 옵션을 제공해주어 사용하기가 편해 웹에서 많이 사용되는 이미지슬라이더 bxslider

 

https://bxslider.com/

jQuery Content Slider | Responsive jQuery Slider | bxSlider

 

bxSlider 깃허브를 확인해보니 responsive jQuery content slider 라고 써있다.

어느 기기에서나 조정이 되는 Fully responsive 라고...

 

 

기존 bxSlider

bxSlider는 기본적으로 반응형을 제공하기는 하지만 화면을 줄이면 전체적으로 사이즈가 작아지는 것일 뿐, 보여지는 슬라이드 갯수를 반응형으로 조절해주지는 않는다. 화면이 작아지는데 슬라이드 갯수를 그대로 유지하다보니 이미지와 내용 영역이 좁아진다.

기존 스크립트

$('.bx_slider').bxSlider({
  slideWidth: 1000,
  minSlides: 4,
  maxSlides: 4,
  moveSlides: 1,
  slideMargin: 60,
  auto: true,
  autoControls: true,
  autoHover: true,
  adaptiveHeight: true,
  pager: false
});

 

 

---

 

반응형 bxslider

수정한 스크립트를 적용한 결과, 화면의 크기가 작아지면 슬라이드 갯수도 줄면서 슬라이드 간의 간격도 줄어든다.

이 외에도 다양한 bxSlider의 옵션들을 화면 크기에 따라 바뀌도록 설정할 수 있다.

 

 

스크립트 전체 코드

기존의 스크립트를 아래 스크립트로 교체하여 사용하면 된다.

이 스크립트는 화면의 크기가 변화되면 슬라이더를 다시 로드하는 방식으로 작동한다.

var $slider;

function buildSliderConfiguration() {

    var deviceWidth = $(window).width();
    
    /* 반응형으로 설정할 옵션 정의 */
    var slideNum;  
    var slideMargin;

    /* 화면 사이즈별 슬라이드 갯수, 마진 설정, 기타 옵션도 설정 가능 */
    if (deviceWidth < 480) {
        slideNum = 1;
        slideMargin = 30;
    } else if (deviceWidth < 991) {
        slideNum = 2;
        slideMargin = 40;
    } else if (deviceWidth < 1200) {
        slideNum = 3;
        slideMargin = 50;
    } else {
        slideNum = 4;
        slideMargin = 60;
    }

    return {
        slideWidth: 1000,
        autoControls: true,
        auto: true,
        autoHover: true,
        adaptiveHeight: true,
        pager: false,
        moveSlides: 1,
        slideMargin: slideMargin, /*반응형 옵션*/
        minSlides: slideNum,  /*반응형 옵션*/
        maxSlides: slideNum   /*반응형 옵션*/
    };
}

function configureSlider() {
    var config = buildSliderConfiguration();

    if ($slider && $slider.reloadSlider) {
        $slider.reloadSlider(config);
    } else {
        $slider = $('.bx-slider').bxSlider(config);  /* 슬라이더 클래스 또는 아이디 입력 */
    }
}

$('.slider-prev').click(function () {
    var current = $slider.getCurrentSlide();
    $slider.goToPrevSlide(current) - 1;
});

$('.slider-next').click(function () {
    var current = $slider.getCurrentSlide();
    $slider.goToNextSlide(current) + 1;
});

$(window).on("orientationchange resize", configureSlider);
configureSlider();

 

 

스크립트 설명

이 부분에서 화면 사이즈별로 보여줄 슬라이드 갯수를 조정하면 된다. 필요에 따라 디바이스 크기를 더 세분화하거나 줄여도 된다. 슬라이드 갯수 뿐만이 아니라 반응형이 필요한 다른 옵션들도 여기서 변수 설정해주면 된다.

/* 반응형으로 설정할 옵션 정의 */
var slideNum;  
var slideMargin;
   
if (deviceWidth < 480) {
  slideNum = 1;
  slideMargin = 30;
} else if (deviceWidth < 991) {
  slideNum = 2;
  slideMargin = 40;
} else if (deviceWidth < 1200) {
  slideNum = 3;
  slideMargin = 50;
} else {
  slideNum = 4;
  slideMargin = 60;
}

* bxSlider에서 사용할 수 있는 다양한 옵션들은 https://bxslider.com/options/ 참고

 

 

bxSlider 기본 옵션들을 이 부분에서 설정해주는데, 위쪽에서 반응형 변수 설정했던 것들(slideMargin, slideNum)을 여기에 표기해주면 된다.

여기에서는 minSlides와 maxSlides를 동일하게 지정했지만 따로 나눠서 반응형 지정할 수도 있고, moveSlides나 Pager등 다양한 옵션을 디바이스크기별로 지정이 가능하다. 사용 범위는 무궁무진!

return {
  slideWidth: 1000,
  autoControls: true,
  auto: true,
  autoHover: true,
  adaptiveHeight: true,
  pager: false,
  moveSlides: 1,
  slideMargin: slideMargin, /*반응형 옵션*/
  minSlides: slideNum,  /*반응형 옵션*/
  maxSlides: slideNum   /*반응형 옵션*/
};

 

 

컨트롤 (이전, 다음 버튼 등) 스타일은 CSS파일에서 @media screen 코드를 넣어 조정하면 된다.

CSS예시

.bx-wrapper .bx-controls-direction a {}
.bx-wrapper .bx-next {}
.bx-wrapper .bx-prev::after {}
.bx-wrapper .bx-next::after {}

@media screen and (max-width: 1200px) {
  .bx-wrapper .bx-controls-direction a {}
  .bx-wrapper .bx-next {}
  .bx-wrapper .bx-prev::after {}
  .bx-wrapper .bx-next::after {}
}

@media screen and (max-width: 991px) {
  .bx-wrapper .bx-controls-direction a {}
  .bx-wrapper .bx-next {}
  .bx-wrapper .bx-prev::after {}
  .bx-wrapper .bx-next::after {}
}