How to use jQuery jcarousel to show slide images in repeater control inside DataList control in ASP.Net

Hi cywa,

I have created a sample which full fill your requirement you need to modify the code according to your need.

SQL

CREATE TABLE [Images](
	[Id] [int] IDENTITY(1,1) ,
	[Name] [varchar](30) NOT NULL,
	[Url] [nvarchar](200) NOT NULL,
	[CategoryId] [int] NULL,
	[CategoryName] [VARCHAR](50) NULL,
)
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 714', N'http://farm3.staticflickr.com/2854/10380193164_9b65e4c5ed_n.jpg', 1,'First Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 707', N'http://farm8.staticflickr.com/7395/10380186284_4f9ac522ed_n.jpg', 1,'First Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 716', N'http://farm8.staticflickr.com/7424/10380408813_3cd984570d_n.jpg', 1,'First Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Blue Columbine', N'http://farm4.staticflickr.com/3723/8986453414_a869ddc3aa_n.jpg', 1,'First Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'1 January 2012 007', N'http://farm8.staticflickr.com/7130/6885958326_ecbb33e962_n.jpg', 2,'Second Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'1 January 2012 001', N'http://farm8.staticflickr.com/7051/7032054587_5f15e32a10_n.jpg', 2,'Second Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'1 January 2012 013', N'http://farm8.staticflickr.com/7228/6885959482_670fb32b58_n.jpg', 2,'Second Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'1 January 2012 017', N'http://farm8.staticflickr.com/7120/7032057469_ce0c1620d4_n.jpg', 2,'Second Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 065', N'http://farm3.staticflickr.com/2828/10379529486_7abd3b99ef_n.jpg', 3,'Third Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 053', N'http://farm4.staticflickr.com/3723/10379498815_2acedf4c6c_n.jpg', 3,'Third Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 595', N'http://farm8.staticflickr.com/7397/10379841244_ec8c68ccc4_n.jpg', 3,'Third Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 227', N'http://farm6.staticflickr.com/5528/10379655586_2a95e5f127_n.jpg', 3,'Third Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 192', N'http://farm3.staticflickr.com/2837/10379605235_5e95702e08_n.jpg', 4,'Fourth Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 249', N'http://farm3.staticflickr.com/2820/10379652095_983088cf4c_n.jpg', 4,'Fourth Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 254', N'http://farm8.staticflickr.com/7380/10379642624_89b111ef11_n.jpg', 4,'Fourth Category')
INSERT [Images] ([Name], [Url], [CategoryId],[CategoryName]) VALUES (N'Fall 525', N'http://farm8.staticflickr.com/7460/10379808224_336a427151_n.jpg', 4,'Fourth Category')

HTML

<div>
    <asp:DataList ID="dlImages" runat="server" OnItemDataBound="dlImages_ItemDataBound">
        <ItemTemplate>
            <div>
                <%# Eval("CategoryName") %>
                <asp:HiddenField ID="hfCategoryId" Value='<%# Eval("CategoryId") %>' runat="server" />
            </div>
            <div>
                <ul id="mycarousel" class="jcarousel-skin-tango">
                    <asp:Repeater ID="rptImages" runat="server">
                        <ItemTemplate>
                            <li>
                                <img alt="" style='height: 75px; width: 75px' src='<%# Eval("Url") %>' />
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
            <br />
        </ItemTemplate>
    </asp:DataList>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
    <link href="http://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" rel="Stylesheet" />
    <script type="text/javascript">
        $(function () {
            $('[id*=mycarousel]').jcarousel();
        });
    </script>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindDataList();
    }
}

protected void dlImages_ItemDataBound(object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        HiddenField hfCategoryId = e.Item.FindControl("hfCategoryId") as HiddenField;
        Repeater rptImages = e.Item.FindControl("rptImages") as Repeater;
        rptImages.DataSource = BindRepeater(hfCategoryId.Value);
        rptImages.DataBind();
    }
}

private void BindDataList()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        string query = "SELECT [CategoryName],[CategoryId] FROM Images GROUP BY [CategoryName],[CategoryId] ORDER BY [CategoryId]";
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            dlImages.DataSource = dt;
            dlImages.DataBind();
        }
    }
}

private DataTable BindRepeater(string categoryId)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        string query = @"SELECT [Url] FROM [Images] WHERE CategoryId = @CategoryId";
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            cmd.Parameters.AddWithValue("@CategoryId", categoryId.Trim());
            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            sda.Fill(dt);
        }
    }
    return dt;
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs)
	If Not IsPostBack Then
		BindDataList()
	End If
End Sub

Protected Sub dlImages_ItemDataBound(sender As Object, e As DataListItemEventArgs)
	If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
		Dim hfCategoryId As HiddenField = TryCast(e.Item.FindControl("hfCategoryId"), HiddenField)
		Dim rptImages As Repeater = TryCast(e.Item.FindControl("rptImages"), Repeater)
		rptImages.DataSource = BindRepeater(hfCategoryId.Value)
		rptImages.DataBind()
	End If
End Sub

Private Sub BindDataList()
	Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
	Using con As New SqlConnection(constr)
		Dim query As String = "SELECT [CategoryName],[CategoryId] FROM Images GROUP BY [CategoryName],[CategoryId] ORDER BY [CategoryId]"
		Using cmd As New SqlCommand(query, con)
			Dim sda As New SqlDataAdapter(cmd)
			Dim dt As New DataTable()
			sda.Fill(dt)
			dlImages.DataSource = dt
			dlImages.DataBind()
		End Using
	End Using
End Sub

Private Function BindRepeater(categoryId As String) As DataTable
	Dim dt As New DataTable()
	Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
	Using con As New SqlConnection(constr)
		Dim query As String = "SELECT [Url] FROM [Images] WHERE CategoryId = @CategoryId"
		Using cmd As New SqlCommand(query, con)
			cmd.Parameters.AddWithValue("@CategoryId", categoryId.Trim())
			Dim sda As New SqlDataAdapter(cmd)
			sda.Fill(dt)
		End Using
	End Using
	Return dt
End Function

ScreenShot