How to Create Featured Content Slider Using jQuery in ASP.NET

Posted: May 23, 2012 in News
Tags: , ,
the easiest way to develop ASP.NET Content Slider, check below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" type="text/css" href="http://demo.webdeveloperplus.com/featured-content-slider/style.css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#featured > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 5000, true);
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="featured">
        <ul class="ui-tabs-nav">
            <asp:Repeater ID="header" runat="server">
                <ItemTemplate>
                    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-<%#Eval("ListID") %>">
                        <img src='<%#Eval("Thumb") %>' alt="" /><span><%#Eval("Title") %></span></a></li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
        <asp:Repeater ID="content" runat="server">
            <ItemTemplate>
                <div id="fragment-<%#Eval("ListID") %>" style="">
                    <img src='<%#Eval("ImageURL") %>'
                        alt="" />
                    <div class="info">
                        <h2>
                            <a href="#"><%#Eval("Title") %></a></h2>
                        <p>
                            <%#Eval("Description") %><a href="#">read more</a></p>
                    </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>
HAPPY CODING !!!!!!
Advertisements
Comments
  1. Ankit Gupta says:

    Thanku so much exactly i was looking for

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s