jQuery & jQuery cycle plugin & CSS & HTML5

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

jQuery cycle plugin
Arabic HTML

*{
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'
});