Implement Bootstrap Carousel (Image Gallery) from database using Repeater control in ASP.Net

Last Reply on Oct 07, 2015 09:48 AM By Shashikant

Posted on Oct 07, 2015 04:37 AM

hello guys

i am using Bootstrap carousel slider script inside Repeater but its not working proper.

i want show image and indicator .when i used indicator 

 

  <ol class="carousel-indicators">
       

then its not working 

help me anyone please 

my code is 

 

 

 <asp:Repeater ID="rptImages" runat="server">
            <ItemTemplate>
                <ol class="carousel-indicators">
       

                 <li data-target="#myCarousel"  >
                  <%#Eval("Banner_Name")%>
                  </li>  
                      

                    </ol>
                 <div class="carousel-inner">
                       
                       
                    <div <%# Container.ItemIndex == 0 ? "class=\"item active\"" : "class=\"item\"" %>>
                    <img src='<%#Eval("Banner_Image")%>' class="img-responsive" alt="" style="width:848px; height:388px">
                    </div>    
                      
                     </div>
                      
                
                
            </ItemTemplate>
        </asp:Repeater>  

 

Posted on Oct 07, 2015 09:48 AM

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html