ساخت اسلایدشو jcarousel در ASP.Net

شنبه 6 اردیبهشت 1393

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

ساخت اسلایدشو jcarousel در ASP.Net

سلام دوستان

در این مقاله قصد داریم یک اسلاید شو با استفاده از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();

 

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

 

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

فایل های ضمیمه

ایمان مدائنی

نویسنده 1299 مقاله در برنامه نویسان

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

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید