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

Create a dynamic Slider in asp.net

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

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.

Download
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.

Post a Comment

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

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

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget