Create a dynamic Slider in asp.net

Introduction: In this article I have explain how we can Create a dynamic Slider in asp.net

Description:
In the previous article I have explained Server side validation in MVC Razor using data annotation,Like linq query example and bind gridview, URL routing in asp.net website, Populate Dropdown List dynamically using Asp.net MVC Razor, Code First migration in asp.net MVC 4, Populate Cascading Dropdown List in Asp.net MVC4 using Json and Jquery and What is Asp.net MVC? Its advantages and disadvantges.

I have a Table Slider:

Id	int
Imagepath	nvarchar(MAX)
Description	varchar(50)

Here Id is auto increment. Table have the Data see attched snapshot:

Add a webform to project. After that drag and drop the controls from Toolbox. Now add/link the below given Javascript and Style in between Heat Tag:

<link type="text/css" rel="stylesheet" href="js/style.css" />

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

    <script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script>

    <script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#gallery').galleryView({

                panel_width: 800,

                panel_height: 300,

                frame_width: 100,

                frame_height: 100,

                nav_theme: 'custom'

            });

        });

</script>

Now desgin the .aspx page as mention below:

<table align="center">

        <tr><td>

        <div id="gallery" class="galleryview">

            <asp:GridView ID="grdgallery" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1">

            <Columns>

      <asp:TemplateField>

      <ItemTemplate>

     <div class="panel">

                <img src='<%# ResolveUrl(Eval("Imagepath").Tostring()) %>' width="800px" height="300px" />

                 <div class="panel-overlay">

                    <h2><%# Eval("Description")%></h2>                  

                </div>            

                </div>

      </ItemTemplate>

      </asp:TemplateField>

      </Columns>

            </asp:GridView>

            <ul class="filmstrip">

            <asp:Repeater ID="rptthumb" runat="server" DataSourceID="SqlDataSource1">

        <ItemTemplate>

            <li><img width="100" height="100" src='<%# ResolveUrl(Eval("Imagepath").Tostring()) %>'/></li>

        </ItemTemplate>

        </asp:Repeater>

            </ul>

        </div></td></tr></table>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server"

                ConnectionString="<%$ ConnectionStrings:TestingConnectionString2 %>"

                SelectCommand="SELECT * FROM [Slider]"></asp:SqlDataSource>

Here Gridview and Repetar are bind using SqlDataSource.

Run the project and check the result.

Is this article helpful for you?
If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.