ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Implement Bootstrap Carousel (Image Gallery) from database using Repeater control in ASP.Net<p>Here I have created sample that will help you out.</p> <p><span style="text-decoration: underline;">HTML</span></p> <pre class="brush: html">&lt;div&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#39;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&#39; media=&#34;screen&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#39;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js&#39;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { $(&#39;#myCarousel&#39;).carousel(); }); &lt;/script&gt; &lt;style type=&#34;text/css&#34;&gt; .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; } &lt;/style&gt; &lt;div id=&#34;myCarousel&#34; class=&#34;carousel slide&#34; data-ride=&#34;carousel&#34; style=&#34;width: 848px;&#34;&gt; &lt;asp:Repeater ID=&#34;rptMain&#34; runat=&#34;server&#34; OnItemDataBound=&#34;OnItemDataBound&#34;&gt; &lt;ItemTemplate&gt; &lt;ol class=&#34;carousel-indicators&#34;&gt; &lt;asp:Repeater ID=&#34;rptIndicators&#34; runat=&#34;server&#34;&gt; &lt;ItemTemplate&gt; &lt;li data-target=&#34;#myCarousel&#34; data-slide-to=&#39;&lt;%# Container.ItemIndex%&gt;&#39; class=&#39;&lt;%# Container.ItemIndex == 0 ? &#34;active&#34; : &#34;&#34; %&gt;&#39;&gt; &lt;%#Eval(&#34;Banner_Name&#34;)%&gt; &lt;/li&gt; &lt;/ItemTemplate&gt; &lt;/asp:Repeater&gt; &lt;/ol&gt; &lt;div class=&#34;carousel-inner&#34; role=&#34;listbox&#34;&gt; &lt;asp:Repeater ID=&#34;rptSlides&#34; runat=&#34;server&#34;&gt; &lt;ItemTemplate&gt; &lt;div &lt;%# Container.ItemIndex == 0 ? &#34;class=\&#34;item active\&#34;&#34; : &#34;class=\&#34;item\&#34;&#34; %&gt;&gt; &lt;img src=&#39;&lt;%#Eval(&#34;Banner_Image&#34;)%&gt;&#39; class=&#34;img-responsive&#34; alt=&#34;&#34; style=&#34;width: 848px; height: 388px&#34;&gt; &lt;/div&gt; &lt;/ItemTemplate&gt; &lt;/asp:Repeater&gt; &lt;/div&gt; &lt;/ItemTemplate&gt; &lt;/asp:Repeater&gt; &lt;a class=&#34;left carousel-control&#34; href=&#34;#myCarousel&#34; role=&#34;button&#34; data-slide=&#34;prev&#34;&gt; &lt;span class=&#34;glyphicon glyphicon-chevron-left&#34; aria-hidden=&#34;true&#34;&gt;&lt;/span&gt;&lt;span class=&#34;sr-only&#34;&gt; Previous&lt;/span&gt; &lt;/a&gt;&lt;a class=&#34;right carousel-control&#34; href=&#34;#myCarousel&#34; role=&#34;button&#34; data-slide=&#34;next&#34;&gt;&lt;span class=&#34;glyphicon glyphicon-chevron-right&#34; aria-hidden=&#34;true&#34;&gt; &lt;/span&gt;&lt;span class=&#34;sr-only&#34;&gt;Next&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;">C#</span></p> <pre class="brush: csharp">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(&#34;rptIndicators&#34;) as Repeater; Repeater rptSlides = e.Item.FindControl(&#34;rptSlides&#34;) 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(&#34;Banner_Name&#34;), new DataColumn(&#34;Banner_Image&#34;) }); dt.Rows.Add(&#34;1&#34;, &#34;http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg&#34;); dt.Rows.Add(&#34;2&#34;, &#34;http://static.flickr.com/75/199481072_b4a0d09597_s.jpg&#34;); dt.Rows.Add(&#34;3&#34;, &#34;http://static.flickr.com/57/199481087_33ae73a8de_s.jpg&#34;); dt.Rows.Add(&#34;4&#34;, &#34;http://static.flickr.com/77/199481108_4359e6b971_s.jpg&#34;); dt.Rows.Add(&#34;5&#34;, &#34;http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg&#34;); dt.Rows.Add(&#34;6&#34;, &#34;http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg&#34;); dt.Rows.Add(&#34;7&#34;, &#34;http://static.flickr.com/58/199481218_264ce20da0_s.jpg&#34;); dt.Rows.Add(&#34;8&#34;, &#34;http://static.flickr.com/69/199481255_fdfe885f87_s.jpg&#34;); dt.Rows.Add(&#34;9&#34;, &#34;http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg&#34;); dt.Rows.Add(&#34;10&#34;, &#34;http://static.flickr.com/70/229228324_08223b70fa_s.jpg&#34;); return dt; }</pre> <p><span style="text-decoration: underline;">Screenshot</span></p> <p><img src="http://i.imgur.com/Wl0aCIW.gif" alt="" /></p>https://www.aspforums.net:443/Threads/190546/Implement-Bootstrap-Carousel-Image-Gallery-from-database-using-Repeater-control-in-ASPNet/https://www.aspforums.net:443/Threads/190546/Implement-Bootstrap-Carousel-Image-Gallery-from-database-using-Repeater-control-in-ASPNet/Wed, 07 Oct 2015 09:48:15 GMT