bxslider 반응형 적용하는 방법

 

bxSlider란?

https://github.com/stevenwanderski/bxslider-4

 

bxSlider는 슬라이더 이미지나 콘텐츠 슬라이더를 만들기 위해 사용하는 jQuery 플러그인으로 아직도 많은 사이트에서 사용되고 있는데요, bxSlider의 github 페이지를 들어가보면 완전히 로드되는 반응형 jQuery 컨텐트 슬라이더라고 소개하고 있습니다.

bxSlider는 다음과 같은 특징을 설명하고 있습니다.

• 완전 반응형: 모든 기기에 적응합니다.
• 다양한 슬라이드 모드: 수평, 수직, 페이드 모드를 지원합니다.
• 다양한 콘텐츠 지원: 슬라이드에 이미지, 비디오 또는 HTML 콘텐츠를 포함할 수 있습니다.
• 작은 파일 크기, 완전한 테마 지원, 간단한 구현: 가볍고 사용하기 쉬우며 테마도 지원합니다.
• 브라우저 지원: Firefox, Chrome, Safari, iOS, Android, IE7+와 호환됩니다.
• 다양한 구성 옵션: 다양한 설정을 통해 슬라이더를 맞춤 구성할 수 있습니다.

이러한 특징 때문에 홈페이지 작업시 저도 많이 사용을 하는 편인데요, 일반적으로는 아래와 같은 방법으로 슬라이더를 사용합니다.

$(".bx-slider").bxSlider({
	옵션...
});

 

 

문제점

 

그런데 슬라이드를 캐러셀로 만들고 싶어 slideWidth, slideMargin, minSlides, maxSlides와 같은 옵션을 추가하게 되면 브라우저 크기가 작아져도 캐러셀 개수를 맞추기 위해서 요소가 너무 작아지거나 캐러샐 요소의 width값이 정해져 있어 요소가 브라우저 크기를 넘어가 잘려보이는 등의 현상이 발생하여 원하는 의도로  반응형 슬라이드를 만들지 못하는 문제가 있습니다.

이런 경우 resize나 orientalChange 이벤트에 listener를 사용하여 다양한 옵션을 변경해줄 수 있습니다.

 

해결방법

var slider;
function configSlider() {
	var diviceWidth = $(window).width();
    var slideMargin, slideWidth;
    
    if(diviceWidth < 760) {
    	slideMargin = 30;
        slideWidth = 320;
    } else {
    	sideMargin = 45;
        slideWidth = 380;
    }
    
    return {
    	option...,
        slideMargin = slideMargin,
        slideWidth = slideWidth
    }
}

function buildSlider() {
	var config = configSlider();
    
    if(slider && slider.reloadSlider) {
    	slider.reloadSlider(config);
    } else {
    	slider = $(".bx-slider").bxSlider(config);
    }
}

$(window).on("load orientationchange resize", buildSlider);

 

위 코드의 경우 브라우저 창의 크기가 760px 이하로 작아지거나 761px 보다 큰 경우 slide 아이템의 width값과 간격을 변경하는 코드인데요, configSlider 함수가 중요한 부분입니다.

변수를 slideWidth와 slideMargin 두 개만 넣고 있는데 변경하고 싶은 옵션을 추가로 더 넣을 수 있으며 else if를 사용하여 분기도 더 세분화하여 나눌 수 있습니다.

 

 

이런식으로 변경하고 싶은 옵션을 변수에 넣고 윈도우 크기에 따라서 변수의 값이 변하게 하여 크기가 변함에 따라 정해놓은 값으로 슬라이더를 리로드하거나 슬라이더를 생성여 위와 같은 결과물을 얻을 수 있습니다.

결론

저의 경우에는 주로 width값이나 margin 값을 변경을 하는 편이지만 데스크탑 환경에서는 좌우로 슬라이드가 되다가 모바일 환경에서는 위아래로 슬라이드가 되게 한다는 등 다양한 옵션을 변경할 수 있으니 https://bxslider.com/options을 참고하셔서 원하는 슬라이드를 만들어 보시면 좋겠습니다.