I'm using the jCarouselLite plugin by kswedberg kswedberg jCarousel Lite. Each of my listed items should have 100% of the browser's height and width. The items are li's in an ul which is framed in the .jcarousel div. Everything works fine so far, but the .jcarousel container always extends to the width of all items (altough the css width is set to 100%), making it possible to scroll aswell. Actually it should just have the browser's 100% width and hide any overflow, so that all other elements can only be shown, when the list ul changes it's position.
CSS:
.jcarousel {
position: relative;
overflow: hidden;
height: 100%;
ul {
position: relative;
height: 100%;
}
li {
float: left;
height: 100%;
width: 100%;
}
}
JS:
$(function() {
$(".jcarousel").jCarouselLite({
btnNext: ".jcarousel-next",
btnPrev: ".jcarousel-prev"
});
});
Does anyonw know, why the .jcarousel container takes that big size, I thought it's main purpose would be to not show it :) ?
Here the example page: Example
Thanks!