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