100 % 품목 너비의 jCarousel?

Question

jcarousel이 li 너비 100 %로 작동하도록하려고합니다. 즉 브라우저 창에있는 모든 너비는 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; 
    } 
}