How can I retrieve data from a database and make it visible on a carousel

I wish to place multiple images in my carousel so that 4 of them are view able at a time as the carousel moves forward to the next screen.

I've tried changing the position of the data repeater however it doesn't effect the display what so ever rather it actually removes the carousel completely. The code for this portion is as followed :

    <div class="container">
        <div class="row blog">
            <div class="col-md-12">
                <div id="blogCarousel" class="carousel slide" data-ride="carousel">

                    <ol class="carousel-indicators">
                        <li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#blogCarousel" data-slide-to="1"></li>
                    </ol>


                    <div class="carousel-inner">

                        <div class="carousel-item active">
                            <div class="row">
                              <asp:Repeater runat="server" ID="rptrimage">
                            <ItemTemplate>

                                <div class="col-md-3 col-sm-6 col-lg-3 col-xs-6  SimilarBooks">

                                    <img src="<%#Eval("BookPic")  %>"   class="img-responsive" style="width="200" height="200" " />  

                                </div>
                                </ItemTemplate>
                                     </asp:Repeater>
                                </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
              </div>

My aim is to display 4 images in 1 carousel view i.e I can see 4 items at a time and when my carousel slides to the next part I may be able to see 4 new images that get loaded from the database.

The issue is that it shows all the images in my database and the carousel button disappears.