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

 طريقة التركيب :

<style>

.slider1 { position: relative; z-index: 5; }

.slider1 .shell { position: relative; }

.slider1 .slider-wrapper { position: absolute; top: -233px; left: 0; } 

.slider1 .slider-holder { float: left; display: inline; width: 520px; height: 276px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GwN3nfwy2xshNFnnGj0BTbe5DwB92f8A-FI-qgKj2rabLUfZyzZA3MXPZjDpHzSiuxv2q-0dOMwSv1DhhjdY4SpmT64Z0sFhL4nLmOZXaYBZAx5cSTyBoK6yDis4xuw69mmi6AaGzAM/s1600/home1-slider.png) no-repeat 0 0; position: relative; margin-left: 14px; } 

.slider1 .slider-holder .content { width: 469px; height: 242px; position: relative; overflow: hidden; margin: 14px 0 0 26px; } 

.slider1 .slider-holder .content ul { list-style: none outside none; position: relative; overflow: hidden; } 

.slider1 .slider-holder .content ul li { width: 469px; height: 242px; position: relative; overflow: hidden; } 

.slider1 .slider-holder .content .jcarousel-clip { width: 469px; height: 242px; position: relative; overflow: hidden; } 

.slider1 .slider-holder .carousel-prev,

.slider1 .slider-holder .carousel-next { position: absolute; top: 114px; width: 52px; height: 53px; display: block; font-size: 0; line-height: 0; text-indent: -4000px; }

.slider1 .slider-holder .carousel-prev { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqH2wU-bNGPaMSHop0aQrzDKzeKnOORJnbSQbrYbcebkp-b87BEV6wQQRa-qjF1eLgEwu1C-Bt47S5z0eXgHVyqpjJt_28Y8CW-VT_t7DdjNM7442NikurGCLecMMO6ITxnm5853U8Lss/s1600/carousel1-prev.png) no-repeat 0 0; left: -13px;}

.slider1 .slider-holder .carousel-next { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7px1ZcwzVkgzYtPMiXUzCyku61zWgqTZb9-fraLckqNOYQRXfyzSn_vuuB56P_LRRm1qdE6s2q8a70TpOjagsgia5bfLMlM20Ha5hs1esY7Ij7NCi7k9vIWyE4vW5HAH48Fks5eoUEiA/s1600/carousel1-next.png) no-repeat 0 0; right: -13px;}

.slider1 .slider-sidebar { float: left; display: inline; width: 350px; margin: 7px 0 0 75px; }

.slider1 .slider-sidebar h2 { font-size: 35px; font-weight: bold; color: #fff; text-transform: none; text-shadow: 1px 1px 1px #459126; margin-bottom: 16px; }

.slider1 .slider-sidebar p { font-size: 14px; line-height: 20px; color: #fff; }

.slider1 .slider-sidebar .slider-btn { margin-top: 28px; }

.slider1 .slider-nav { position: absolute; bottom: -21px; left: 208px; }

.slider1 .slider-nav ul { list-style: none outside none; }

.slider1 .slider-nav ul li { float: left; display: inline; width: 15px; height: 15px; margin-right: 6px; }

.slider1 .slider-nav ul li a { float: left; display: inline; width: 15px; height: 15px; font-size: 0; line-height: 0; text-indent: -4000px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6jGuxUmDQL0S_UzDijPMXBNTRJDvs6KrjGRPybbb4TrS7ldBWCqCKr0AazJhohtTkWQQc2Q-UJonGLOliLowJNpTw862iidUHXWE45ywitD9eRuZ9TZJWNdIjE27GFneQAJ4gwkKdKl4/s1600/slider1-pagination.gif) no-repeat 0 0; }

.slider1 .slider-nav ul li a:hover,

.slider1 .slider-nav ul li a.active { background-position: right 0; }

.slider2 { }

.slider2 .shell { position: relative; }

.slider2 .slider-holder { width: 100%; position: absolute; top: -235px; left: -10px;}

.slider2 .slider-holder .content { width: 100%; height: 367px; margin: 10px 0 0 17px; position: relative; overflow: hidden; }

.slider2 .slider-holder .content ul { list-style: none outside none; position: relative; overflow: hidden; }

.slider2 .slider-holder .content ul li { width: 100%; height: 367px; position: relative; }

.slider2 .slider-holder .content .jcarousel-clip,

.slider2 .slider-holder .content .jcarousel-container { width: 100%; height: 367px; position: relative; overflow: hidden; }

.slider2 .slider-holder .content ul li .image-holder { width: 450px; float: left; display: inline; }

.slider2 .slider-holder .content ul li .image-holder img { display: block; margin: 30px 0 0 25px; }

.slider2 .slider-holder .content ul li .text-holder { width: 350px; float: left; display: inline; margin: 55px 0 0 35px;}

.slider2 .slider-holder .content ul li .text-holder h2 { font-size: 35px; font-weight: bold; color: #fff; text-transform: none; text-shadow: 1px 1px 1px #459126; margin-bottom: 16px; }

.slider2 .slider-holder .content ul li .text-holder p { font-size: 14px; line-height: 20px; color: #fff; margin-bottom: 15px; }

.slider2 .slider-holder .content ul li .text-holder ul li { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhuTf4un8Ityp-dKAiayJYjP-17J2qK7l5MKHKFrxEnXDNSiiVk8a7b0Owo71AvfYsiu121MP7YIoMpRhfn9kHccg3pQ7p7-dwAS8d4GPpmCTEs2-GI0OJzteXhKOkFYtRKk5QiqiG-TI/s1600/slider-custom-bullet.png) no-repeat 0 5px; padding-left: 20px; font-size: 14px; color: #fff; width: auto; height: auto; margin-bottom: 3px; }

.slider2 .slider-holder .content ul li .text-holder .slider-btn { margin: 25px 0 0 15px; }

.slider2 .slider-holder .slider-bar { height: 50px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIgWzwMqPAMC6RTkzb3kwRzRyHCGSXXkf_HD-SDiNaptJXaEHnOvfyJRdNuAGYYreDNwGWY8JfVaLeNETlU0oTibnbWdhhJiFpPBL56QX09ILOQpV6DB8VerVRFYhl4O6BFG5duWf-l8/s1600/slider2-bar-bg.png) repeat 0 0; position: absolute; bottom: 18px; left: 19px; width: 957px; z-index: 10; }

.slider2 .slider-holder .slider-bar .content { width: 780px; height: 50px; margin: 0 0 0 20px; }

.slider2 .slider-holder .slider-bar .content .jcarousel-clip,

.slider2 .slider-holder .slider-bar .content .jcarousel-container { width: 780px; height: 50px; }

.slider2 .slider-holder .slider-bar .content ul { list-style: none outside none; position: relative; }

.slider2 .slider-holder .slider-bar .content ul li { width: 780px; height: 50px;position: relative; color: #fff; font-size: 15px; line-height: 50px; }

.slider2 .slider-holder .slider-bar .content ul li a { font-weight: bold; color: #fdbb38; font-size: 15px; }

.slider2 .slider-holder .slider-bar .content ul li a:hover { color: #fff; text-decoration: none; }

.slider2 .slider-holder .slider-bar .carousel-down,

.slider2 .slider-holder .slider-bar .carousel-up { position: absolute; top: 2px; display: block; width: 41px; height: 44px; font-size: 0; line-height: 0; text-indent: -4000px; }

.slider2 .slider-holder .slider-bar .carousel-down { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip5BPmMLDAnNuBZB0YxpiuuFtZDz1ccWNYjmZxDLcUbbGo18vfmezSXsyIGDx76yezg3vLXdPXPfXWlnpeeDrhijnaqM70sVcE7ZS0OO5ptV3emLTzZulsk8w8nBeiljePeBxXOOdipWk/s1600/carousel-down.png) no-repeat 0 0; right: 63px;}

.slider2 .slider-holder .slider-bar .carousel-up { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGiyy_mX989nCugiPANrJoIQyomdGHjaJT-ZM_X66MBPIcIdmvu6U8LXJsDEt-u85Jajvw9ApdG517uke_9U0Jekdp7p8aGEbHzZObWeDtTBTrpNR1wI9BQIPxc-6TVw6pEdi_K_PdxY0/s1600/carousel-up.png) no-repeat 0 0; right: 18px; }

</style>

<script src="http://wbt.googlecode.com/svn/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>

<script src="http://wbt.googlecode.com/svn/easySlider1.5.js" type="text/javascript" charset="utf-8"></script>

<script src="http://wbt.googlecode.com/svn/jquery.jcarousel.js" type="text/javascript" charset="utf-8"></script>

<script src="http://wbt.googlecode.com/svn/js-func.js" type="text/javascript" charset="utf-8"></script>

<!-- slider 1 -->

<div class="slider1">

<div class="shell">

<!-- slider holder -->

<div class="slider-holder">

<div class="content">

<ul>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

</ul>

</div>

<a href="#" class="carousel-prev">prev</a>

<a href="#" class="carousel-next">next</a>

<div class="slider-nav">

<ul>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li></ul>

</div>

</div>

<!-- end slider holder -->

<div class="cl">&nbsp;</div>

</div>

</div>

<!-- end slider 1 -->