ساخت اسلایدشو jcarousel در ASP.Net
شنبه 6 اردیبهشت 1393در این مقاله قصد داریم یک اسلاید شو با استفاده از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();
نمونه ضمیمه شده
موفق و پیروز باشید
- ASP.net
- 6k بازدید
- 3 تشکر