[bxsliderj.js] 반응형 width 설정하기

   $('.main_fac > ul').bxSlider({
       auto: false,
       pager: true,
       infiniteLoop: false,
       controls: false,
       shrinkItems: true,
       minSlides: 1,
       maxSlides: 4,
       slideWidth: 800,
       slideMargin: 25
   });

 

＃bxslider 옵션에 slideWidth값을 넣으면 스크린에 맞춰 반응형으로 줄어든다.

하지만, 이대로 써버리면 화면을 계속 줄였을 때 li의 width 값이 한없이 줄어들어서 문제...
그래서 해결책으로 모바일 사이즈가 될때까지는 li width 값을 직접 설정하고,
모바일 사이즈에서는 자동으로 설정되게 (모바일 사이즈보다 slideWidth 값이 커야  li값이 100%가 된다.) 했다.

 

 

@media screen and (min-width: 1200px) {
    .main_fac ul li {width: 280px !important;}
}
@media screen and (min-width: 640px) and (max-width:1200px) {
    .main_fac ul li {max-width: 300px !important;margin-right: 20px;}
    .main_fac ul li:last-child {margin-right: 0;}
}