0

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!

idmean
  • 14,540
  • 9
  • 54
  • 83
R4ttlesnake
  • 1,661
  • 3
  • 18
  • 28
  • i cannot see any buttons on the example page – Rachel Gallen Jul 12 '14 at 16:57
  • Sorry, forgot to mention, that the buttons are so far overlayed DIVs on the left/right sides. Thanks for the help so far. I don't really want to disable the mouse, the only problem is, that the jCarousel overrides the width (100%) of my .jcarousel wrapper with the collective width of the containing li-elements. So the overflow: hidden can not work aswell. In the original demo [see here](http://plugins.learningjquery.com/jcarousellite/demo/responsive.html), this does not happen. So I wonder why it does this for me? – R4ttlesnake Jul 14 '14 at 14:44
  • you have to set the jcarousel options in the head of the html like she has done on the page and it needs that function at the end – Rachel Gallen Jul 14 '14 at 15:47

1 Answers1

0

this may work - put this code in the bottom of your page

<script>
    $(document).ready(function() {
        $("#menu_body > ul").bind("mousewheel", function() {
            if ($.browser.webkit === true) {
                return false;
            }
        });
    });
</script>

Reference

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81