jCarousel wrapper extends width and creates scrollbar?

[Eiirp]

Hello, I'm using the jCarouselLite 1.8. to create a slideshow with 100% width/height of the browser. Each li-element should have the full browser size and by clicking on the left/right overlayed DIVs, the user can navigate through the single list-items.

The final width and amount of the li-elements should be flexible and with the attached code, the jCarousel already works quite fine, with the only issue, that it extends the width of the main .jcarousel-wrapper to collective width of three containing li-elements and it should only stay at 100% of the browser's width, clipping the rest of.

Turning off autoCSS, solves this problem, but the carousel jumps on the first click three items until it works properly (the responsive feature doesn't really work aswell without).

Is there a good example for setting up a 100% width/height jCarousel?

Thanks for any help on this!

SCSS:

.jcarousel {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    ul {
        position: absolute;
        height: 100%;
        width: 20000em;
    }
    li {
        position: relative;
        float: left;
        height: 100%;
        width: 100vw;
    }
}

JS:

  $(function() {
    $(".jcarousel").jCarouselLite({
        btnNext: ".jcarousel-next",
        btnPrev: ".jcarousel-prev",
        circular: true,
        responsive: true,
        autoWidth: false
    });
  });

[kswedberg]

I think what you're looking for is the visible option: https://github.com/kswedberg/jquery-carousel-lite#visible--number---default-is-3

Try setting visible: 1 and let me know if that works.

[Eiirp]

That's it! Thanks, I was somewhat blind.