문제

나는 JCarousel을 가지고 있고, 나는 그를 8 개의 요소를 표시 할 수있게한다.이제 브라우저의 크기를 조정할 때 JCAROUSEL 막대가 브라우저 공간에서 나가기 때문에 JCAROUSEL의 크기를 조정합니다. 나는하려고 노력한다 :

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

.그러나 그것은 일하는 것 같지 않습니다. 브라우저가 너무 작아지면 (예 : 전화로 본) JCarousel이 사라지고 항목 목록을 볼 수있는 것이 좋습니다. @media와 함께? 갤러리의 이미지조차도 항상 100px 100px이기 때문입니다.필요한 경우 예제를 제공 할 수 있습니다.

도 다음과 같이 지금을 시도했습니다. $ (창). 트리거 ( '크기 조정');

 $(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 주위에 화살표를 추가 할 수 없습니다.

도움이 되었습니까?

해결책

비 Lite 버전을 사용하여 해결할 수있는 것처럼 보입니다. Jcarousel ...에Lite 버전으로 쉽게 할 수 있다고 생각하지 않습니다.

그들은 반응 예제 를 제공합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top