jcarousel 및 응답 레이아웃

Question

나는 jcarousel을 가지고 있고 그를 8 개의 요소를 표시하도록 관리합니다. 이제 jcarousel 막대가 브라우저 공간에서 나가기 때문에 브라우저의 크기를 조정할 때 jcarousel 크기를 조정할 수도 있습니다. 시도 :

$(window).resize(function() { 
     $("#Carousel").jcarouselLite({ 
       visible: 5      
     }); 
    }); 

머리 부분. 그러나 그것은 효과가없는 것 같습니다. 브라우저가 너무 작아서 (예 : 휴대 전화에서 볼 때) jcarousel을 사라지게하고 항목 목록을 보는 것이 더 좋습니다. @media와 ? 갤러리의 이미지도 항상 100px 100px이므로 필요한 경우 예제를 제공 할 수 있습니다.

다음과 같이 시도해보십시오. $ (window) .trigger ('resize');

$(window).resize(function(){ 
if($(window).width() > 300 && $(window).width() < 500){ 
    $('.next, .prev').unbind('click'); 
    $('.image-gallery').jCarouselLite({ 
     visible: 3.5, 
     btnNext: ".next", 
     btnPrev: ".prev" 
    }); 
} 
else if($(window).width() > 500 && $(window).width() < 700){ 
    $('.next, .prev').unbind('click'); 
    $('.image-gallery').jCarouselLite({ 
     visible: 4.5, 
     btnNext: ".next", 
     btnPrev: ".prev" 
    }); 
} 
else if($(window).width() > 700 && $(window).width() < 900){ 
    $('.next, .prev').unbind('click'); 
    $('.image-gallery').jCarouselLite({ 
     visible: 5, 
     btnNext: ".next", 
     btnPrev: ".prev" 
    }); 
} 
    else if($(window).width() > 1000){ 
    $('.next, .prev').unbind('click'); 
    $('.image-gallery').jCarouselLite({ 
     visible: 6, 
     btnNext: ".next", 
     btnPrev: ".prev" 
    }); 
} 
}); 

작동하지만 주기적으로 볼 수있는 요소를 보여주기 때문에 문제가 있습니다. 모든 요소가 아닌 JcarouselLite 코드가 남아 있기 때문에 또 다른 이상한 점이 있습니다 : 0, jcarousel 주위에 Arrow를 추가 할 수없는 것 같습니다.

Answer 1

넌 라이트 버전 jCarousel을 사용하면 문제를 해결할 수있는 것처럼 보입니다. 나는 라이트 버전으로하기가 쉽지 않다고 생각한다.

그들은 responsive example을 제공합니다.