jcarousel с 100% литой шириной?

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; 
    } 
}