jcarousel 100％li物品宽度？

Question

我试图让jcarousel以100％的宽度工作，其宽度为li。即无论浏览器窗口的宽度如何，这是li项目的宽度，并且如果窗口缩小，则文本将相应地流动，并仍然用作滑块。

这里是我的小提琴......

http://jsfiddle.net/kirkbross/3FhcQ/38/

Answer 1

我发现，我不得不使用从下面的示例所采取的jQuery：

http://sorgalla.com/jcarousel/examples/responsive/

$(document).ready(function() { 
    var jcarousel = $('.carousel-stage'); 

    jcarousel 
     .on('jcarousel:reload jcarousel:create', function() { 
      var width = jcarousel.innerWidth(); 
      var height = jcarousel.innerHeight(); 

      if (width < 560) { 
       jcarousel.jcarousel('items').css('width', width + 'px'); 
       jcarousel.jcarousel('items').css('height', (width*0.666) + 'px'); 
      } else { 
       jcarousel.jcarousel('items').css('width', '600px'); 
       jcarousel.jcarousel('items').css('height', '400px'); 
      } 

     }) 
});   

和CSS - 对于这种情况下的连接传送带

@media screen and (max-width: 660px) { 
    .connected-carousels, 
    .connected-carousels .stage, 
    .connected-carousels .navigation, 
    .connected-carousels .carousel-stage, 
    .connected-carousels .carousel-navigation, 
    .carousel-stage li img { 
     width: 100%; 
     height:auto; 
    } 
    .carousel-stage li img { 
     padding: 0; 
     margin: 0; 
     vertical-align: top; 
    } 
    .connected-carousels .prev-stage, .connected-carousels .next-stage { 
     width: 50%; 
     height: 100%; 
    } 
    .jcarousel-clip-horizontal 
    { 
     width: 100%;  
     overflow: hidden; 
    } 
}