Convert Bootstrap Carousel to ASP.Net Repeater

I am trying to create a carousel with dynamic data using ASP.Net Repeater control.Here is what I want it to look like:

The image above is accomplished with static data and I want to convert it to use dynamic data and so far here what I achieved.

Here is the code for the above dynamic carousel.

    <div id="myCarousel" class="carousel slide container vertical" data-ride="carousel" data-interval="false">

            <ol class="carousel-indicators video-items">
                <asp:Repeater runat="server" ID="IndicatorRepeater">
                    <ItemTemplate>
                        <li data-target="#myCarousel" data-slide-to="<%# (Container.ItemIndex)%>" class="<%# (Container.ItemIndex == 0 ? "active" : "") %>"></li>
                    </ItemTemplate>
                </asp:Repeater>
            </ol>
            <div class="carousel-inner" role="listbox">
                <asp:Repeater runat="server" ID="ItemRepeater">
                    <ItemTemplate>
                        <div class="item <%# (Container.ItemIndex == 0 ? "active" : "") %>">
                            <div class="row">
                                <div class="col-md-5 col-xs-3">
                                    <a href="#" class="players" title='<%# Eval("LinkDescription").ToString() %>'>
                                            <img class="img-responsive" src="<%# Eval("ImgSrc").ToString() %>" alt="<%# Eval("Title").ToString() %>">
                                        </a>
                                </div>
                                <div class="col-md-7 page-text">
                                    <%# Eval("Title").ToString() %>
                                    <br />
                                    <span>Season: 2015</span>

                                </div>
                            </div>
                        </div>
                        <div class="push"></div>
                    </ItemTemplate>
                </asp:Repeater>

            </div>
            <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>

            <!-- /.carousel -->

        </div>

Would anyone know how I can show more than one image or all image?