Error in displaying slider using repeater in asp.net

Question

i have an image slider, in its layout there i have a large picture container an blow that there are thumbnails(images). when each thumbnail is clicked it is displayed in the large picture container. these images come from database. i am using a repeater to view them. the problem arising is that when the page is executed all the picture are opened in the large picture container later when i click a single picture from the thumbnail then it show a single larger picture.

The aspx code is:

                <div class="carousel property">
                                        <div class="preview">

                                            <asp:Repeater ID="rptr_preview" runat="server">
                                                <ItemTemplate>
                                                    <a class="active colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
                                                        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
                                                    </a>
                                                </ItemTemplate>
                                            </asp:Repeater>


                                        </div>
                                        <!-- /.preview -->

                                        <div class="content">
                                            <ul>
                                                <asp:Repeater ID="rptr_slider" runat="server">
                                                    <ItemTemplate>
                                                        <li class="active" data-index='<%#Eval("sr_no") %>'>
                                                            <asp:Image ID="Image_thumbnail" ImageUrl='<%#Eval("image_url") %>' runat="server" />

                                            </ul>

                                            <a class="carousel-prev" href="#">Previous</a>
                                            <a class="carousel-next" href="#">Next</a>
                                        </div>
                                        <!-- /.content -->
                                    </div>

C# code:

protected void Page_Load(object sender, EventArgs e)
    {
        using(Property_dbDataContext context=new Property_dbDataContext())
        {
            var prop_detail = context.user_detail(5).ToList().ToArray();
            rptr_preview.DataSource = prop_detail;
            rptr_preview.DataBind();
            rptr_slider.DataSource = prop_detail;
            rptr_slider.DataBind();
        }
    }

the output is:

this display which i want is like:

Answer 1

In your repeater your setting the class active for every image and every tumbnail. You should set the active class for only the first item of the repeater.

UPDATE

In jquery :

$(".preview a:nth-child(1)").addClass("active");
$(".content li:nth-child(1)").addClass("active");

Remove the active class from the repeater and do the following on document.ready.

UPDATE

First remove the class from the repeater.

<asp:Repeater ID="rptr_preview" runat="server">
     <ItemTemplate>
       <a class="colorbox gallery" id="slide-<%#Eval("sr_no") %>" href='<%#Eval("image_url") %>'>
        <asp:Image ID="Preview" CssClass="active colorbox gallery" ImageUrl='<%#Eval("image_url") %>' runat="server" />
        </a>
        </ItemTemplate>
</asp:Repeater>

Second, add the jquery in the document.ready. You will have to add a reference to jquery for this to work.

<script type="text/javascript">
    $(document).ready(function() {
         $(".preview a:nth-child(1)").addClass("active");
         $(".content li:nth-child(1)").addClass("active");

    });
</script>

I would recommend to put any jquery or javascript code in your own .js file and reference it in the page to but for the purpose of the demonstration the script tag does the job.