Tuesday, 16 July 2013

Jquery Image slider using user control in asp.net(c#)

Today i will Explain you how to create jquery image slider using usercontrol in asp.net



FIRST STEP: Create a User Control wherein you have to place one Repeater Control you can also take DataList.

.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="JqueryAdvertismentUserControl.ascx.cs"
    Inherits="JqueryAdvertismentUserControl" %>
<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
        <div id="AdrvertisePlugin">
    </HeaderTemplate>
    <ItemTemplate>
        <img height="450" width="150" src="images/AdvertismentImages/<%# DataBinder.Eval(Container.DataItem,"img")  %>"
            alt='<%# DataBinder.Eval(Container.DataItem,"vcimgAlttext") %>' />
    </ItemTemplate>
    <FooterTemplate>
        </div>
    </FooterTemplate>

</asp:Repeater>

.ascx.cs

public static string CON = ConfigurationManager.ConnectionStrings["con"].ConnectionString;
    protected void Page_Load(object sender, EventArgs e)
    {
        GetBanners();
    
    }
     public void GetBanners()
    {
        SqlConnection Conn = new SqlConnection(CON);
        SqlCommand cmd = new SqlCommand("select * from TableName ",Conn);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        try
        {
            Conn.Open();
            da.Fill(dt);
            Repeater1.DataSource = dt.DefaultView;
            Repeater1.DataBind();
          
        }
        catch (Exception exe)
        { 
        }
        finally 
        {
            Conn.Close(); 
        }
    

    }

SECOND STEP:
Now Register the usercontrol on Default.aspx page . I have use  Slider.js

<%@ Register TagName="Advertisment" TagPrefix="AUC" Src="~/Admin/JqueryImageRotater/JqueryAdvertismentUserControl.ascx" %>


IN HEADER TAG :

Download slide-show-s3slider-jquery-plugin From here   
You Can add (Important) latest min.js 
<link href="css/Slider.css" rel="stylesheet" type="text/css" />
   <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> 

 <script src="js/s3Slider.js" type="text/javascript"></script>

<script type="text/javascript">
     
        $(document).ready(function () {
            $("#slider").s3Slider({
                timeOut: 10000
           
            });
        });

    </script>

IN BODY TAG ADD UserControl:

   <AUC:Advertisment ID="slider" runat="server" />




3 comments: