Create a dynamic Slider in - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

Create a dynamic Slider in

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

I have a Table Slider:

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 () {
                panel_width: 800,
                panel_height: 300,
                frame_width: 100,
                frame_height: 100,
                nav_theme: 'custom'

Now desgin the .aspx page as mention below:
<table align="center">
        <div id="gallery" class="galleryview">
            <asp:GridView ID="grdgallery" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1">
     <div class="panel">
                <img src='<%ResolveUrl(Eval("Imagepath").Tostring()) %>' width="800px" height="300px" />
                 <div class="panel-overlay">
                    <h2><%# Eval("Description")%></h2>                  
            <ul class="filmstrip">
            <asp:Repeater ID="rptthumb" runat="server" DataSourceID="SqlDataSource1">
            <li><img width="100" height="100" src='<%ResolveUrl(Eval("Imagepath").Tostring()) %>'/></li>
        <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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.


Give the link of all CSS , JS files so that i can download

to download the file/project click on click here link.