Hi shaneko,
The way you have used for displaying the Carousel in Repeater will not work as when you use repeater for carousel items then you need to change the structure as per the carousel required.
I have created a sample which full fill your requirement you need to modify the code according to your need.
The table tblFile which i have used for sample you can get it from below article.
Refer below sample code and modify it according to your need.
HTML
<div>
<div class="container text-center">
<h3>
A demo of Modal carousel</h3>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalCarousel">
Click here to launch modal carousel
</button>
<!-- Modal -->
<div class="modal fade" id="ModalCarousel" tabindex="-1" role="dialog" aria-labelledby="ModalCarouselLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 350px !important">
<div id="myCarousel" class="carousel slide" align="center" data-ride="carousel" data-pause="hover">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" align="center" role="listbox" style="width: 350px;">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div class="item">
<div class="carousel-content">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>'
Height="150px" Width="150px" />
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<!-- Next / Previous controls here -->
<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>
</div>
</div>
</div>
</div>
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({
interval: 1000
});
$('.item')[0].className = "item active";
});
</script>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
public void BindData()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlConnection conn = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand("SELECT * FROM tblFiles WHERE ContentType = 'image/jpeg'", conn);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataSet dt = new DataSet();
sda.Fill(dt);
Repeater1.DataSource = dt;
Repeater1.DataBind();
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindData()
End If
End Sub
Public Sub BindData()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim conn As New SqlConnection(constr)
Dim cmd As New SqlCommand("SELECT * FROM tblFiles WHERE ContentType = 'image/jpeg'", conn)
Dim sda As New SqlDataAdapter(cmd)
Dim dt As New DataSet()
sda.Fill(dt)
Repeater1.DataSource = dt
Repeater1.DataBind()
End Sub
ScreenShot
