Multiple Itemslide's on a page

[chocolata]

Hi, I'm working on a project in which I have several itemslides on a page. Right now, I've been working with this workaround, but it's giving me some issues:

var carousel_1;
var carousel_2;
$(document).ready(function() {
    $('.outfit a').on('click',function(e) {
        e.preventDefault();
        $(this).toggleClass('liked');
    });

    carousel_1 = $("#outfit_1");
    carousel_1.itemslide();
    carousel_2 = $("#outfit_2");
    carousel_2.itemslide();
});
$(window).resize(function () {
    carousel_1.reload();
    carousel_2.reload();
});

The problem is that the second carousel is causing the page to be very wide, which just scrolls the whole page on iPhone4.

See a demo here: http://beta.jackie-lee.com/mcgregor/during.html

Do you have any suggestions for multiple carousels on one page?

[f0rmat1k]

@maartenmachiels I think you just should remove horizontal scrollbar by setting overflow: hidden on any fullpage element, e.g. on body in your example. Look at itemslide example. It set on <div id="scrolling">.

[chocolata]

Sorry for the slight delay. Was waiting on testresults from iPhone. It works great now! Your suggestions concerning overflow: hidden; work very well. Thanks a bunch!