JCAROUSEL 및 반응 형 레이아웃
-
21-12-2019 - |
문제
나는 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 주위에 화살표를 추가 할 수 없습니다.
제휴하지 않습니다 StackOverflow