BXslider의 minslide와 maxslide로 반응 형 슬라이더 만들기

Question

그래서 bxslider는 더 효과적입니다. 더 넓은 해상도를 위해 여러 슬라이드 (3)를 설정할 때까지 반응이 좋습니다. minslide와 maxslide 옵션을 설정하면 모든 것이 동일하게 유지됩니다.

나는 또한 어느 쪽도 작동하지 않습니다이

var slidesvar; 
if ($(window).width() < 600) { 
    slidesvar = 1; 
} else { 
    slidesvar = 3; 
} 


$('.prodslide').bxSlider({ 
    minSlides: slidesvar, 
    maxSlides: slidesvar 
}); 

처럼 보였다 변수 어딘가에 버전을 검토 한 결과이 기본 조건 코드

if ($(window).width() < 600) { 
    $('.prodslide').bxSlider(); 
} else { 
    $('.prodslide').bxSlider({ 
     minSlides: 3, 
     maxSlides: 3 
    }); 
} 

을 시도했습니다.

그리고 내가 콘솔에서 얻는 유일한 오류는 Google doubleclick 관련입니다.

Answer 1

기본값 mode: carousel을 사용하는 경우 slideWidth도 설정해야합니다. 중단 점을 600px로 설정하려면 slideWidth: 200을 설정하십시오.

var bx = $('.bx').bxSlider({ 
 
    minSlides: 1, 
 
    maxSlides: 3, 
 
    slideWidth: 200, 
 
    shrinkItems: true 
 
});

<link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet"> 
 

 
<ul class='bx'> 
 
    <li><img src='http://lorempixel.com/200/200/people/1'></li> 
 
    <li><img src='http://placehold.it/200x200/000/fff?text=2'></li> 
 
    <li><img src='http://lorempixel.com/200/200/people/2'></li> 
 
    <li><img src='http://placehold.it/200x200/0ff/000?text=4'></li> 
 
    <li><img src='http://lorempixel.com/200/200/people/3'></li> 
 
    <li><img src='http://placehold.it/200x200/83d800/000?text=6'></li> 
 
    <li><img src='http://lorempixel.com/200/200/people/4'></li> 
 
    <li><img src='http://placehold.it/200x200/f7a/000?text=8'></li> 
 
    <li><img src='http://lorempixel.com/200/200/people/5'></li> 
 
    <li><img src='http://placehold.it/200x200/fc0/000?text=10'></li> 
 
    <li><img src='http://lorempixel.com/200/200/people/7'></li> 
 
    <li><img src='http://placehold.it/200x200/f00/fff?text=12'></li> 
 
</ul> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js'></script>