Home > ASP.Net, Jquery > News Slider using JQuery

News Slider using JQuery


Hi all,

Try this Example to make News Slider using JQuery


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
    <script src="http://bxslider.com/js/jquery.bxSlider.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://bxslider.com/bx_styles/bx_styles.css" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function() {
            $(document).ready(function() {
                $('#slider1').bxSlider({
                    auto: true,
                    autoControls: true,
                    autoHover: true,
                    pager: false,
                    controls: false
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Repeater ID="rptNews" runat="server">
        <HeaderTemplate>
            <ul id="slider1">
        </HeaderTemplate>
        <ItemTemplate>
            <li>
                <img src='<%#Eval("Image")%>' width="219" height="218" />
                <h3>
                    <%#Eval("Title")%><span><%#Eval("Year")%></span></h3>
                <p>
                   <%#Eval("Content")%> </p>
                <div>
                </div>
            </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>
    </form>
</body>
</html>

and in code behind :-


using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            var list = (new[]{
            new{
                Title="led zeppelin I",
                Year="1968", 
                Content="the conceptual originality of the album was displayed on tracks such as \"good times bad times\", \"dazed and confused\" and \"communication breakdown\", which had a distinctively heavy sound to the ears of young rock fans in the late-1960s.", 
                Image="http://bxslider.com/images/pic_zep1.jpg"
               },
            new{
                Title="led zeppelin II",
                Year="169", 
                Content="led zeppelin II furthered the lyrical themes established on their debut album, creating a work that became more widely acclaimed and influential than its predecessor. with elements of blues and folk music, it also exhibits the band's evolving musical style of blues-derived material and their guitar and riff-based sound. it is one of the band's heaviest albums.", 
                Image="http://bxslider.com/images/pic_zep2.jpg"
               },
            new{
                Title="led zeppelin III",
                Year="1970", 
                Content="composed largely at a remote cottage in wales known as Bron-Yr-Aur, this work represented a maturing of the band's music towards a greater emphasis on folk and acoustic sounds. this surprised many fans and critics, and upon its release the album received rather indifferent reviews.", 
                Image="http://bxslider.com/images/pic_zep3.jpg"
               },
            new{
                Title="led zeppelin IV (zoso)",
                Year="1971", 
                Content="no title is printed on the album, so it is generally referred to as led zeppelin IV, following the naming standard used by the band's first three studio albums. also the album has alternatively been referred to as zoso.", 
                Image="http://bxslider.com/images/pic_zep4.jpg"
               }
           
        }).ToList();
            rptNews.DataSource = list;
            rptNews.DataBind();
        }
    }
}

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Jquery
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: