Hi ilanocf,
For Carousel you have to use repeater control.
Please refer below sample.
Database
CREATE TABLE [dbo].[YoutubeVideos]
(
[VideoId] [int] NOT NULL,
[VideoUrl] [nvarchar](1000) NOT NULL
)
HTML
C#
<body class="container">
<form id="form1" runat="server">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<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" : "" %>'>
<%# Container.ItemIndex + 1 %>
</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\"" %>>
<iframe id="video" height="300" frameborder="0" allowfullscreen
src='<%# "https://www.youtube.com/embed/" + DataBinder.Eval(Container, "DataItem.VideoUrl").ToString().Split(new string[] {"v="}, StringSplitOptions.None)[1] %>'></iframe>
</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>
</form>
</body>
VB.Net
<body class="container">
<form id="form1" runat="server">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<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='<%# If(Container.ItemIndex = 0, "active", "") %>'>
<%# Container.ItemIndex + 1 %>
</li>
</ItemTemplate>
</asp:Repeater>
</ol>
<div class="carousel-inner" role="listbox">
<asp:Repeater ID="rptSlides" runat="server">
<ItemTemplate>
<div class='<%# If(Container.ItemIndex = 0, "item active", "item") %>'>
<iframe id="video" height="300" frameborder="0" allowfullscreen
src='<%# "https://www.youtube.com/embed/" + DataBinder.Eval(Container, "DataItem.VideoUrl").ToString().Split(New String() {"v="}, StringSplitOptions.None)(1) %>'></iframe>
</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>
</form>
</body>
Script and CSS
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" media="screen" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' />
<script type="text/javascript" src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></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;
}
.carousel-inner .active.left {
left: -33%;
}
.carousel-inner .active.right {
left: 33%;
}
.carousel-inner .next {
left: 33%
}
.carousel-inner .prev {
left: -33%
}
.carousel-control.left {
background-image: none;
}
.carousel-control.right {
background-image: none;
}
.carousel-inner .item {
background: white;
}
.carousel-inner .active {
padding-left: 110px !important;
}
iframe {
padding-left: 5px;
}
</style>
<script type="text/javascript">
$(function () {
$('#myCarousel').carousel();
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
Namespaces
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Code
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()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT VideoId, VideoUrl FROM YoutubeVideos", con))
{
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dummy As DataTable = New DataTable()
dummy.Columns.Add()
dummy.Rows.Add()
rptMain.DataSource = dummy
rptMain.DataBind()
End If
End Sub
Protected Sub OnItemDataBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs)
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
Dim rptIndicators As Repeater = TryCast(e.Item.FindControl("rptIndicators"), Repeater)
Dim rptSlides As Repeater = TryCast(e.Item.FindControl("rptSlides"), Repeater)
rptIndicators.DataSource = GetData()
rptIndicators.DataBind()
rptSlides.DataSource = GetData()
rptSlides.DataBind()
End If
End Sub
Private Function GetData() As DataTable
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT VideoId, VideoUrl FROM YoutubeVideos", con)
Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim dt As DataTable = New DataTable()
sda.Fill(dt)
Return dt
End Using
End Using
End Using
End Function
Screenshot
