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>
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" />
Awsm
ReplyDeleteVery helpful... Thank you!!!
ReplyDeleteThanks sir very help full..
ReplyDeleteShukriyaaa