Enable (Set) auto Scroll (Slide) in jQuery jCarousel Plugin in ASP.Net

Hi akhter,

Set auto property to true and set wrap to circular to auto rotate.

Check this example. Now please take its reference and correct your code.

Aldo place the Repeater ItemTemplate content inside the li tag.

HTML

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
    <link rel="Stylesheet" href="https://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" />
    <script type="text/javascript">
        $(function () {
            $('[id*=mycarousel]').jcarousel({
                auto: true,
                animation: 'slow',
                wrap: 'circular',
                scroll: 1 // No of Image To Slide on click of next and previous button.
            });
        });
    </script>
    <ul id="mycarousel" class="jcarousel-skin-tango">
        <asp:Repeater ID="Repeater2" runat="server">
            <ItemTemplate>
                <li>
                    <div style="float: left; width: 25%">
                        <asp:Image ID="Image1" runat="server" Style="width: 220px; height: 250px" ImageUrl='<%# Eval("pro_image")%>' />
                        <h2>
                            <p>
                                <span class="rupees">
                                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("pro_name")%>'></asp:Label></span></p>
                        </h2>
                        <div class="price-details">
                            <div class="price-number">
                                <p>
                                    <span class="rupees">PKR<asp:Label ID="Label1" runat="server" Text='<%# Eval("pro_price")%>'></asp:Label></span></p>
                            </div>
                            <div class="add-cart">
                                <h4>
                                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("pro_id","~/View/User/productdetails.aspx?view={0}") %>'>View Details</asp:HyperLink>
                                </h4>
                            </div>
                            <div class="clear">
                            </div>
                        </div>
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</asp:Content>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] { 
                        new System.Data.DataColumn("pro_id", typeof(int)),
                        new System.Data.DataColumn("pro_name", typeof(string)),
                        new System.Data.DataColumn("pro_image",typeof(string)),
                        new System.Data.DataColumn("pro_price",typeof(decimal))});
        dt.Rows.Add(1, "Prod 1", "Images/1.jpg", 1100);
        dt.Rows.Add(2, "Prod 2", "Images/2.jpg", 1200);
        dt.Rows.Add(3, "Prod 3", "Images/3.jpg", 1300);
        dt.Rows.Add(4, "Prod 4", "Images/4.jpg", 1400);
        dt.Rows.Add(5, "Prod 5", "Images/5.jpg", 1500);
        dt.Rows.Add(6, "Prod 6", "Images/6.jpg", 1600);
        dt.Rows.Add(7, "Prod 7", "Images/7.jpg", 1700);
        Repeater2.DataSource = dt;
        Repeater2.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn() {
                            New System.Data.DataColumn("pro_id", GetType(Integer)), _
                            New System.Data.DataColumn("pro_name", GetType(String)), _
                            New System.Data.DataColumn("pro_image", GetType(String)), _
                            New System.Data.DataColumn("pro_price", GetType(Decimal))})
        dt.Rows.Add(1, "Prod 1", "Images/1.jpg", 1100)
        dt.Rows.Add(2, "Prod 2", "Images/2.jpg", 1200)
        dt.Rows.Add(3, "Prod 3", "Images/3.jpg", 1300)
        dt.Rows.Add(4, "Prod 4", "Images/4.jpg", 1400)
        dt.Rows.Add(5, "Prod 5", "Images/5.jpg", 1500)
        dt.Rows.Add(6, "Prod 6", "Images/6.jpg", 1600)
        dt.Rows.Add(7, "Prod 7", "Images/7.jpg", 1700)
        Repeater2.DataSource = dt
        Repeater2.DataBind()
    End If
End Sub

Screenshot