Jquery not working in properly in nested repeater

Question

i have many thumbnail sliders according to category wise. but only one slider is showing from inner nested repeater for example

flowers category

img1 img2 img3 img4 img5 // j carousel is showing here only first category remains not

sports category

img1 img2 img3 img4 img5

films category

img1 img2 img3 img4 img5

like that categories is here.

my dotnet design code is

<div>
<asp:Repeater ID="outerRep" runat="server" 
    OnItemDataBound="outerRep_ItemDataBound">
    <ItemTemplate>
        <asp:Label Font-Size="Large" Font-Bold="true" 
            ID="lblCategoryName" runat="server"
            Text='<%# Eval("CategoryName") %>' />
        <ul id="mycarousel" class="jcarousel-skin-tango">
            <asp:Repeater ID="innerRep" runat="server">
                <ItemTemplate>
                    <li> 
                        <asp:Image ID="Image1" runat="server" 
                            ImageUrl='<%#Bind("ImageName") %>'  
                            Height="70" Width="70"/> 
                    </li>
            </asp:Repeater>
        </ul> 
    </ItemTemplate>
</asp:Repeater>

J query Script code:

$(function () {$('#mycarousel').jcarousel();});

only one slider is coming remaining slider of different product not coming. just showing list order.

Answer 1

You are using ID selector so this type of issue is coming.

apply some dummy class to that member and use class selector.

<asp:Repeater ID="outerRep" runat="server" 
    OnItemDataBound="outerRep_ItemDataBound">
    <ItemTemplate>
        <asp:Label Font-Size="Large" Font-Bold="true" 
            ID="lblCategoryName" runat="server"
            Text='<%# Eval("CategoryName") %>' />
        <ul id="mycarousel" class="jcarousel-skin-tango myclass">
            <asp:Repeater ID="innerRep" runat="server">
                <ItemTemplate>
                    <li> 
                        <asp:Image ID="Image1" runat="server" 
                            ImageUrl='<%#Bind("ImageName") %>'  
                            Height="70" Width="70"/> 
                    </li>
            </asp:Repeater>
        </ul> 
    </ItemTemplate>
</asp:Repeater>

In Jquery:

$(function () {$('.myclass').jcarousel();});