jcarousel with 100% li item width?

Question

I'm trying to get jcarousel to work with an li width of 100%. i.e. whatever width the browser window has, that's the width of the li item and if the window is shrunk, the text will flow accordingly and still function as a slider.

Here is my fiddle...

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

That stops the slider from working. The controls work, but the slides don't change. i.e. on the first slide there is no "Previous" control and when I get to the end of the list, the "next" control disappears as it should. So it's _kind of_ working but the slides aren't changing. — Kirk Ross, Aug 28 '13 at 19:11
can you provide a [fiddle](http://jsfiddle.net) that reproduces the issue? — omma2289, Aug 28 '13 at 20:12
I have the same problem - did you find a solution to this problem? — Daniel Flippance, Feb 11 '14 at 20:14

score 0 · Answer 1 · answered Feb 14 '14 at 14:30

I found that I had to use jQuery taken from the following sample:

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

        })
});

and the CSS - for connected carousels in this case

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

jcarousel with 100% li item width?

1 Answers1