Slider not acting responsive

[andre-NL]

We have on one page 2 jcarousels. This is working fine. One is working as an vertical slider and one as an horizontal (only visible on mobile < 768px). But the one for mobile is not acting responsive. For both carousels we have different stylings defined.When we put the "vertical" class on the mobile, the image is acting responsive.... We narrowed it down to the width option of the ul-element: .mcarousel ul { width: 20000em; } When we change that in "height", the image is acting responsive (but of course all images are stacked under eachother....

You kan see at http://jsfiddle.net/andrenl/8anskuo6/1/

[jsor]

Looks like .jcarousel li also need a max-width: 100%.

[andre-NL]

Hi Jan,

max-width on the li-element does not have any effect... I'm puzzled. Below the CSS styling on the elements... (they call mcarousel). Any other suggestions?

.mcarousel { position: relative; overflow: hidden; }

.mcarousel ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0; }

.mcarousel li { float: left; }

.mcarousel li img{ display: block; height: auto !important; -webkit-border-top-right-radius: 26px; border-top-right-radius: 26px;
}

[andre-NL]

Hi

I created an jsfiddle: http://jsfiddle.net/andrenl/8anskuo6/1/

The silder is working, but not resizing...(responsive)

[andre-NL]

Hi,

I've added an function to solve the issue; it works in our specific case; in other cases it would need a minor changes (like the width/height ratio and the id of the carousel).

function resizeMobileImg() { var width = jQuery('#mobilecarousel').width(); var height = Math.floor(width * 0.6656051); $('#mobilecarousel ul li img').height(height).width(width); }

example: http://jsfiddle.net/andrenl/8anskuo6/5/

Perhaps this can be included in the standard functionality somehow?

[jsor]

This is much like the repsonsive carousel example: http://sorgalla.com/jcarousel/examples/responsive/