flexslider 응답하는 회전 목마 문제

Question

나는 flexslider를 사용하여 반응 형 회전 목마를 만들어야합니다. 문제는 브라우저 창을 컨테이너 크기보다 작게 만들면 항목 위치가 엉망이된다는 것입니다.

이

는

이것은> 800 화면 (!)

내 JS 초기화에 상기 슬라이더의 스크린 샷이다> 1,200 화면 슬라이더의 스크린 (미세)이다 :

$('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: true, 
    touch: true, 
    mousewheel: true, 
    itemWidth: 400,   
    prevText: "", 
    nextText: "" 
    }); 

이미지 (2)에서 알 수 있듯이 세 번째 이미지가 잘립니다. 해상도가 임계 값에 도달했을 때 보이는 요소의 수를 2 개로 줄이고 사용 가능한 공간에 이미지를 적용하여 아무것도 잘리지 않게하고 싶습니다. 아이디어?

조금 늦게하지만이 방법으로 문제가 해결 될 것 같습니다

Answer 1

다음 min- 및 최대-항목 설정 창 너비에 따라 동적으로 설정되어

http://flexslider.woothemes.com/dynamic-carousel-min-max.html

을 ...

약간 지저분하지만 이미지가 잘리지 않도록 잘 작동합니다.

Answer 2

flexslider에 itemWidth이 있기 때문입니다. 각 장치에서 너비를 유연하게 만들려면 미디어 쿼리를 작성해야합니다. 그리고 그 전에이 여분의 스크립트를 추가하고 시도하십시오.

// tiny helper function to add breakpoints 
var getGridSize = function() { 
    return (window.innerWidth < 600) ? 1 : 
     (window.innerWidth < 900) ? 2 : 3; 
} 

$('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: false, 
    itemWidth: 200, 
    itemMargin: 40, 
    minItems: getGridSize(), // use function to pull in initial value 
    maxItems: getGridSize(), // use function to pull in initial value 
    directionNav: true, 
    controlNav: false, 
    slideshow: false, 
});