박스슬라이더 반응형 질문드립니다
본문
현재 메인에 상품 슬라이드를 박스슬라이더로 이용하고있는데요
홈페이지 화면이 1500아래일때 슬라이드 가로값을 300으로 변경하고싶습니다 ㅠㅠ
구글링 열시미해봐도 초보라 어렵네요 ㅠㅠ 코드는 이렇습니다! 감사합니다
jQuery(function($){
$('.sct_20').show().bxSlider({
maxSlides: 3,
moveSlides:1,
slideWidth: 500,
auto: true,
pager:false
});
});
답변 2
jQuery(function($){ var wid_val=0; if($(document).width()<1500){ wid_val = 300; }else{ wid_val = 500; // 1500 보다 클경우 } $('.sct_20').show().bxSlider({ maxSlides: 3, moveSlides:1, slideWidth: wid_val, auto: true, pager:false }); });
bxslider의 경우 width가 기본적으로 유동적으로 설정됍니다.
슬라이드를 감싸고있는 엘리먼트( ex:div )의 가로값을 미디어쿼리를 사용해 width 300으로 변경하세요
예)
@media screen and (max-width:1500px){
div { width:300px }
}
답변을 작성하시기 전에 로그인 해주세요.