jQuery cycle plugin Slideshow شرح عمل

jquery css slideshow شرح طريقة عمل

jQuery & jQuery cycle plugin & CSS & HTML5

في هذا الدرس سنتعلم طريقة عمل اسلايد شو او عارض للصور الذي اصبح جزء و عنصر مهم في اي موقع و لة طرق كثيرة سوف القي الضوء علي طريقة سهلة و مبسطة و سنرى كيفية وضع الصور و التحكم في ابعادها و التحكم بها و تحريكها واحدة تلو الاخرى على حسب رغبتك بسم الله الرحمن الرحيم

Download Now


jQuery cycle plugin

Arabic HTML
cars cars cars cars
© Copyright by Eldewiny
*{
margin:0;
padding:0;
}
#wrapper{
width:800px;
margin:0 auto;
position:relative;
}
header{
text-align: center;
margin:25px 0;
padding:15px;
background:#000;
color:#af1c15;
border:2px solid #af1c15;
}
header p{
font-size: 18px;
color:#c0c0c0;
padding-top:15px;
margin-left:12px;
letter-spacing: 14px;
text-transform: uppercase;
}
#slider{
width:800px;
height:400px;
overflow: hidden;
}
#next{
position: absolute;
top:300px;
right:0;
opacity: 0;
z-index: 5;
}
#prev{
position: absolute;
top:300px;
left:0;
opacity: 0;
z-index: 5;
}
#next:hover , #prev:hover{
opacity:.8;
}
footer{
text-align: center;
margin:15px 0;
padding:10px;
background:#000;
color:#af1c15;
border:2px solid #af1c15;
}
$('#slider').cycle({
fx: 'scrollDown',
speed:2000,
pause:1,
easing:'easeOutBounce',
delay:-2000,
next:'#next',
prev:'#prev'
});
  • HTML-CSS jQuery
  • slideshow jquery طريقة عمل
  • you are my best designer Amro 😉 (k)

    • eldewiny

      Thank you anyway , i try to do my best

  • Majid

    Salam Alikoum Akhoya,
    Jazaka allah khairam,
    Mashallah very nice explanation, I learned lot from you.

    • eldewiny

      We Alikoum El salam Akhoya ,
      Thanks a lot and hope it helped !

  • gamal roshdy

    السلام عليكم و رحمة الله و بركاتة
    استاذى العزيز مهندس عمرو
    ياريت تتفضل بشرح عمل ستايل لاسكربت الاستضافة
    whmcs
    تحياتي

    • eldewiny

      و عليكم السلام اخي الكريم 
      هو حلو و مش صعب بس انا مجليش اسئلة كتير عنة 
      بس مش هنسى سؤالك 

  • ameer

      لو سمحت استاذ عمرو اضفت هذه الاضافه اشتغل السلايد اخذتها من الفيو سورس هل عملي صحيح وشكرا

    $(document).ready(function() { 

  • ameer

    الله يحفضك ما اعرف كيف اعبر لك عن شكري وامتناني وانا اسف اني عملت اكثر من كومنت كل الخطا اللي كان عندي كان المفروض اقفل السكريبت

  • Mostafa Zahran

    ماشاء الله عليك والله

    ربنا يحميك ويباركلك 
    شرح ممتاز  

  • مشكووووووووووووووووووووور الله يجزييك باللخير

    • eldewiny

      لا شكر على واجب تمنياتي الاستفادة

  • جزاك الله خيرا

  • كل حلقة بتضفلى جديد ماشاء الله عليك على الشرح الوافى الكافى دة

  • Mohamed Emad

    شكرا يا اخي علي الافاده ولكن هناك تعقيب للاستفاده اكثر انت لم تتكلم بشكل اعمق عن كثير من الامور ولكن قدمت طريقه سهله جدا لعمل السلايد شو وعلي سبيل المثال لم تتعرض لماذا وصعت الalt tag وشكرا

  • mohamed ashrf

    ممكن رابط تحميل البرنامج اللى بتستخدمه او ما اسمه ؟؟

  • Ýøûssêf Ýøûssêf

    شكراً

  • zoro zoro

    لم ينفعل زر النكست والبريف وكذا لم تتحرك الصور
    ففمكن المساعده