Multiple jcarousels second one works right first one scrolls to white space

Question

I have two jcarousels created in two separate user controls loaded on the same page. The first script looks like

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#mycarousel').jcarousel({
        vertical: true,
        auto: 2
    });

});

and set up is

<asp:Repeater runat="server" ID="List" EnableViewState="False" OnItemDataBound="LoadImages"  >
        <HeaderTemplate>
            <ul id="mycarousel" class="mycarousel jcarousel jcarousel-skin-tango" >
        </HeaderTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
        <ItemTemplate>
            <li style="height:100px;">
                <asp:Hyperlink ID="Hyperlink1" runat="server" 
                    NavigateUrl='<%# "~/Products/" + Eval("Linked_Product_UrlLabel") + 
                    ".aspx" %>'>
                    <asp:Image ID="MainImage" runat="server" Height="100" style="margin: 0 10px 10px 0;" CssClass="jcarousel-item" />
                </asp:Hyperlink>
            </li>      
        </ItemTemplate>
    </asp:Repeater>

The second script is

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#mycarousel2').jcarousel({
    auto: 1,
    scroll: 1,
    wrap: 'both'
    });

});

and is set up

<asp:Repeater runat="server" ID="List" EnableViewState="False" OnItemDataBound="LoadImages"  >
        <HeaderTemplate>
            <ul id="mycarousel2" class="mycarousel jcarousel jcarousel-skin-tango" >
        </HeaderTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
        <ItemTemplate>
            <li style="height:100px;">
                <asp:Hyperlink ID="Hyperlink1" runat="server" 
                    NavigateUrl='<%# "~/Products/" + Eval("Linked_Product_UrlLabel") + 
                    ".aspx" %>'>
                    <asp:Image ID="MainImage" runat="server" Height="100" style="margin: 0 10px 10px 0;" CssClass="jcarousel-item" />
                </asp:Hyperlink>
            </li>      
        </ItemTemplate>
    </asp:Repeater>

When the page loads all looks well until the first jcarousel begins to scroll into oblivion. the auto generated scroll buttons cause some jerky reaction but do not scroll it properly. Any thoughts on what I need to change?

I found that my problem indeed was still with naming one of the carousels mycarousel. Apparently if using more than one I can not name either mycarousel

Answer 1

I found that my problem indeed was still with naming one of the carousels mycarousel. Apparently if using more than one I can not name either mycarousel. This was answered in a separate question Multiple jcarousels on one page issue