front/JS
[API] bxslider.js - 반응형 옵션
배고파요
2022. 2. 28. 08:56
728x90
$(document).ready(function() {
// bxslider.js 에 반응형 적용
function menuSliderConfig(){
var windowWidth = $(window).outerWidth;
var wid = $(document).width();
var sliderNum;
if( wid < 1200 || windowWidth < 1200){
sliderNum = 3
}else{
sliderNum = 5
}
return {
mode:'horizontal',//가로 방향 수평 슬라이드 'horizontal', 'vertical', 'fade'
speed:400,//슬라이드가 넘어갈때의 이동속도를 설정 ms단위 1000 = 1초
//pause:10000,//슬라이드 속도를 설정 ms단위 4000 = 4초 : 4초 단위로 롤링
moveSlides:1,//슬라이드 이동시 개수
minSlides:sliderNum,//최소 노출 개수
maxSlides:sliderNum,//최대 노출 개수
slideWidth:224,//슬라이드 너비
slideMargin:20,//슬라이드간의 간격
auto:false,//자동 실행 여부
autoHover:true,//마우스 호버시 정지 여부
autoControls:true,//재생 정지 버튼 노출 여부
controls:true,//이전 다음 버튼 노출 여부
pager:true//현재 위치 페이징 표시 여부 설정
}
};
function noticeSliderConfig(){
var windowWidth = $(window).outerWidth;
var wid = $(document).width();
var sliderNum;
if( wid < 1200 || windowWidth < 1200){
sliderNum = 2
}else{
sliderNum = 4
}
return {
mode:'vertical',//가로 방향 수평 슬라이드 'horizontal', 'vertical', 'fade'
speed:400,//슬라이드가 넘어갈때의 이동속도를 설정 ms단위 1000 = 1초
pause:10000,//슬라이드 속도를 설정 ms단위 4000 = 4초 : 4초 단위로 롤링
moveSlides: sliderNum,//슬라이드 이동시 개수
minSlides: sliderNum,//최소 노출 개수
maxSlides: sliderNum,//최대 노출 개수
slideWidth:400,//슬라이드 너비
slideMargin:15,//슬라이드간의 간격
auto:true,//자동 실행 여부
autoHover:true,//마우스 호버시 정지 여부
autoControls:false,//재생 정지 버튼 노출 여부
controls:true,//이전 다음 버튼 노출 여부
pager:false//현재 위치 페이징 표시 여부 설정
}
};
var noticesliders = new Array();
var menusliders = new Array();
$('.notice_box').each(function(i, slider) {
noticesliders[i] = $(slider).bxSlider( noticeSliderConfig() );
});
$('.shortcut').each(function(i, slider) {
menusliders[i] = $(slider).bxSlider( menuSliderConfig() );
});
$(window).on( 'resize' , function() {
$.each(noticesliders, function(i, slider) {
slider.reloadSlider( noticeSliderConfig() );
});
$.each(menusliders, function(i, slider) {
slider.reloadSlider( menuSliderConfig() );
});
});
});
728x90