How To Make Slideshow Using ASP.NET Repeater

Question

I'm dynamically loading my image urls from database.

Here is my current code for the repeater to load the images

<asp:Repeater ID="Repeater1" runat="server" Visible="True">
    <ItemTemplate>
        <a><asp:Image ID="Image1" runat="server" Width="1200" Height="300" ImageURL='<%#Eval("ThumbnailPath")%>' class="slide" /></a>
    </ItemTemplate>
</asp:Repeater>

That is my .ASPX page where the image comes out but it only shows my images vertically stacked how do I make it into slideshow?

Here is my code To load the pictures to the repeater

    GallerySTR = ConfigurationManager.ConnectionStrings["PPDB"].ConnectionString;
    GalleryCN = new SqlConnection(GallerySTR);

    string LoginQuery = "SELECT * FROM Albums";
    GalleryCN.Open();
    GalleryCMD = new SqlCommand(LoginQuery, GalleryCN);

    GalleryDA = new SqlDataAdapter(GalleryCMD);
    GalleryDS = new DataSet();
    GalleryDA.Fill(GalleryDS);
    Repeater1.DataSource = GalleryDS;
    Repeater1.DataBind();

I can perfectly load the pictures but I can't seem to make it into slideshow. some javascript perhaps? or some technique or codes?

Answer 1

Go get this

jQuery Slideshow

This will go in your aspx designer

<div class="slideshow" data-transition="crossfade" data-loop="true" data-skip="false">
        <ul class="carousel">
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <li class="slide">
                        <img src='<%# DataBinder.Eval (Container.DataItem, "ImageUrl") %>' alt="" width="440" height="200" />
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </div>

Bind your code to this repeater, and don't forget to include the script includes in the aspx page.

UPDATE

Add your required css files link in the head section of the html page. You will need to adapt to your project.

<link href="Content/Slideshow.css" rel="stylesheet">

And at the end of the body tag, you will add the js scripts

<script type="text/javascript" src="Scripts/Slideshow.js"></script>