Hi micah,
Refer the working sample. Images are present in PROFILEPHOTOS folder inside project folder.
HTML
<div>
<ul id="mycarousel" class="jcarousel-skin-tango">
<asp:Repeater ID="rptImages" runat="server">
<ItemTemplate>
<li><span class=""><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">
<asp:Image ID="ImagePath" ImageUrl='<%# String.Format("PROFILEPHOTOS/{0}",Eval("ImageUrl").ToString()) %>'
runat="server" class="clubimg fa-circle-o img-circle animated slideInRight "
Style="background-repeat: no-repeat; border-color: Silver; border-width: 1px;
border-style: Solid;" alt="" data-aria-label-part="" Height="200px" Width="200px" />
</a>
<asp:Label ID="Label33" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Id") %>'
Font-Bold="true" Font-Size="Small"></asp:Label></span></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</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 rel="Stylesheet" href="http://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" />
<script type="text/javascript">
$(function () {
$('[id*=mycarousel]').jcarousel({
wrap: 'circular',
scroll: 1 // No of Image To Slide on click of next and previous button.
});
});
</script>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id", typeof(int)), new DataColumn("ImageUrl", typeof(string)) });
dt.Rows.Add(1, "John.jpg");
dt.Rows.Add(2, "Lokesh.jpg");
dt.Rows.Add(3, "Luke.jpg");
dt.Rows.Add(4, "Mathews.jpg");
dt.Rows.Add(5, "Robert.jpg");
dt.Rows.Add(6, "Ronny.jpg");
dt.Rows.Add(7, "SecondImage.jpg");
dt.Rows.Add(8, "Suzanne.jpg");
dt.Rows.Add(9, "ThirdImage.jpg");
rptImages.DataSource = dt;
rptImages.DataBind();
}
}
Screenshot
