Here I have created sample that will help you out.
HTML
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
media="screen" />
<script type="text/javascript" src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script type="text/javascript">
$(function () {
$('#myCarousel').carousel();
});
</script>
<style type="text/css">
.carousel-indicators li
{
text-indent: 0 !important;
height: 25px !important;
width: 25px !important;
line-height: 25px !important;
border-radius: 25px !important;
background-color: #d1d1d1;
color: #444;
text-align: center;
}
.carousel-indicators li.active
{
background-color: #fff;
}
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width: 848px;">
<asp:Repeater ID="rptMain" runat="server" OnItemDataBound="OnItemDataBound">
<ItemTemplate>
<ol class="carousel-indicators">
<asp:Repeater ID="rptIndicators" runat="server">
<ItemTemplate>
<li data-target="#myCarousel" data-slide-to='<%# Container.ItemIndex%>' class='<%# Container.ItemIndex == 0 ? "active" : "" %>'>
<%#Eval("Banner_Name")%>
</li>
</ItemTemplate>
</asp:Repeater>
</ol>
<div class="carousel-inner" role="listbox">
<asp:Repeater ID="rptSlides" runat="server">
<ItemTemplate>
<div <%# Container.ItemIndex == 0 ? "class=\"item active\"" : "class=\"item\"" %>>
<img src='<%#Eval("Banner_Image")%>' class="img-responsive" alt="" style="width: 848px;
height: 388px">
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">
Previous</span> </a><a class="right carousel-control" href="#myCarousel" role="button"
data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span><span class="sr-only">Next</span> </a>
</div>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dummy = new DataTable();
dummy.Columns.Add();
dummy.Rows.Add();
rptMain.DataSource = dummy;
rptMain.DataBind();
}
}
protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Repeater rptIndicators = e.Item.FindControl("rptIndicators") as Repeater;
Repeater rptSlides = e.Item.FindControl("rptSlides") as Repeater;
rptIndicators.DataSource = GetData();
rptIndicators.DataBind();
rptSlides.DataSource = GetData();
rptSlides.DataBind();
}
}
private DataTable GetData()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Banner_Name"), new DataColumn("Banner_Image") });
dt.Rows.Add("1", "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg");
dt.Rows.Add("2", "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg");
dt.Rows.Add("3", "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg");
dt.Rows.Add("4", "http://static.flickr.com/77/199481108_4359e6b971_s.jpg");
dt.Rows.Add("5", "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");
dt.Rows.Add("6", "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");
dt.Rows.Add("7", "http://static.flickr.com/58/199481218_264ce20da0_s.jpg");
dt.Rows.Add("8", "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg");
dt.Rows.Add("9", "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg");
dt.Rows.Add("10", "http://static.flickr.com/70/229228324_08223b70fa_s.jpg");
return dt;
}
Screenshot