Jcarousel基本，使其響應

Question

我的網頁上有一個jcarousel滑塊，基本版本（只有一個圖像顯示），我似乎無法調整與媒體查詢div jcarousel滑塊。

這裏是HTML代碼

<div id="mycarousel"> 
<div class="wrapper"> 


<div class="jcarousel-wrapper"> 
<div class="jcarousel"> 
<ul> 
<li><img src="img/macu/slide1.png" width="700" height="500" alt=""></li> 


<li><img src="img/macu/slide5.png" width="700" height="500" alt=""></li> 

</ul> 
/div> 

<a href="#" class="jcarousel-control-prev"></a> 
<a href="#" class="jcarousel-control-next"></a> 

<!-- 
<a href="#" class="jcarousel-control-prev">&lsaquo;</a> 
<a href="#" class="jcarousel-control-next">&rsaquo;</a> 
--> 
<!-- <p class="jcarousel-pagination"> --> 
</p> 
</div> 
</div> 
</div> 

，這裏是我的CSS

@media screen and (max-width:545px){ 
//body {background:orange;} 
#content { 
width:43%; 
height:auto; 
} 

#media,#vignette { 
width:auto; 
height:auto; 

} 
#menu { 
width:32%; 
font-size:80%; 
} 

.jcarousel{ 
width:22%; 
//font-size:80%; 
} 

} 

這裏是JS

(function($) { 
$(function() { 
    $('.jcarousel').jcarousel(); 







    $('.jcarousel-control-prev') 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '-=1' 
     }); 

    $('.jcarousel-control-next') 
     .on('jcarouselcontrol:active', function() { 
      $(this).removeClass('inactive'); 
     }) 
     .on('jcarouselcontrol:inactive', function() { 
      $(this).addClass('inactive'); 
     }) 
     .jcarouselControl({ 
      target: '+=1' 
     }); 

    $('.jcarousel-pagination') 
     .on('jcarouselpagination:active', 'a', function() { 
      $(this).addClass('active'); 
     }) 
     .on('jcarouselpagination:inactive', 'a', function() { 
      $(this).removeClass('active'); 
     }) 
     .jcarouselPagination(); 
}); 





})(jQuery); 

我是不是要改變的JS什麼？我發現有一個敏感的jCarousel，但它顯示在同一時間拍攝3張照片... http://sorgalla.com/jcarousel/examples/responsive/

謝謝你:)

Answer 1

響應旋轉木馬

這個例子說明如何實現一個負責任的傳送帶。調整瀏覽器窗口大小以查看效果。 http://sorgalla.com/jcarousel/examples/responsive/

Answer 2

您還可以根據容器大小顯示不同數量的項目。

$('.jcarousel') 
.on('jcarousel:create jcarousel:reload', function() { 
    var element = $(this), 
     width = element.innerWidth(); 

    if (width > 900) { 
     width = width/3; 
    } else if (width > 600) { 
     width = width/2; 
    } 

    element.jcarousel('items').css('width', width + 'px'); 
}) 
.jcarousel({ 
    // Your configurations options 
}); 

所以如果你想顯示超過3張你只需要改變的寬度/ 4