در این مقاله قصد داریم یک اسلاید شو با استفاده ازjcarousel بسازیم

سلام دوستان

در این مقاله قصد داریم یک اسلاید شو با استفاده ازjcarousel بسازیم

در مرحله اول کتابخانه جاوااسکریپت مورد نظر را اضافه میکنیم

<mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></mce:script> <mce:script type="text/javascript" src="http://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js" mce_src="http://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></mce:script> <link href="http://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" mce_href="http://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" rel="Stylesheet" />

سپس یک Repeater در صفحه قرار میدیدم و در ItemTemplate آن تصاویر یا هر المنت دلخواه را قرا میدیم

<asp:Repeater ID="rptImages" runat="server"> <ItemTemplate> <li> <img alt="" style="height: 75px; width: 75px" mce_style="height: 75px; width: 75px" src='<%# Eval("ImageUrl") %>' /> </li> </ItemTemplate> </asp:Repeater>

سپس نیاز به منبع داده میباشد که در این مقاله از DataTable استفاده شده که شما میتوانید از بانک اطلاعاتی لود کنید

DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[1] { new DataColumn("ImageUrl") }); dt.Rows.Add("http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg"); dt.Rows.Add("http://static.flickr.com/75/199481072_b4a0d09597_s.jpg"); dt.Rows.Add("http://static.flickr.com/57/199481087_33ae73a8de_s.jpg"); dt.Rows.Add("http://static.flickr.com/77/199481108_4359e6b971_s.jpg"); dt.Rows.Add("http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg"); dt.Rows.Add("http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg"); dt.Rows.Add("http://static.flickr.com/58/199481218_264ce20da0_s.jpg"); dt.Rows.Add("http://static.flickr.com/69/199481255_fdfe885f87_s.jpg"); dt.Rows.Add("http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg"); dt.Rows.Add("http://static.flickr.com/70/229228324_08223b70fa_s.jpg"); rptImages.DataSource = dt; rptImages.DataBind();

نمونه ضمیمه شده

موفق و پیروز باشید