اليوم اقدم لكم سلايدر شو احترافى ولن تجده الا فى مدونة ابداعاتى ويتميز بالأناقة والجمال والخفة وسهولة التركيب كما يتميز بالحركة الممتازة فلن ترى له مثيل وستشاهد ذلك بنفسك من خلال المعاينة
<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/AVvXsEjnb0xZ-YXeUCksQfcI4oqQZJQubQBITDivfp6NgkOTZLE_IZpMlM8N6X1dddbA-dwR74uA9B4g_ssIfvItgTJ01DUYXwTnEr2jGgatPzqTiKzAPf0v3EvtFQ32PzQQy7WWDDTzr7Aqpg0/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/AVvXsEhj6ptZleC6jU91c3Tc74Ggyg2JpUY4rc9BII-lKtxp7HbcJ6S9ud8qa0lCOw9tKwYRtBMJ5uMfr8-GD8HzXpvA3ZeJ1zPbpM6gMIX7LFKlpvwx7yJgYWau2O7_o72PVcy46wTgIdpoyEA/s1600/carousel1-prev.png) no-repeat 0 0; left: -13px;}
.slider1 .slider-holder .carousel-next { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHWSnhsUcLDMwMwO1TZIrtFrHTY3qvJM_-GtwONNCifFTL1m0mBcOLmDUw581XlGKlt5V7TcVAUb1NxppXd99KZ9mi_ICRX1FcBdLVDKviuLUPxVAlfW1ZMXeItXgCsHnRmStySfgDazo/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/AVvXsEiIorcpWLV6_21hWXkKlv4ohzzQ1r4AUdz-ZKteN6A2BIF9Z9Wy-Abg4p8XEd5ld8Gegtnu69UmMjlsUMOzDfEzb7n6JOzH1m-nXrqy9ALpD15yKiB0XHYbiOCFg_q9skQHuKG-3u99Seo/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/AVvXsEhfFBGlaYkOLkXqYD0QAmjhN7IPzkgEBKuJiHdX5t4AESYK_J7FeeAm6NeNgOONVOqm0b_uIJE0WKNcsXUjuugwrStAF_mUorroL0lBzmFEmVZPXO0iN2wiEIVGeq0gy3fq6A8HkjGSWPQ/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/AVvXsEhvkINHS1YavcvSaK5mR96uEvn6_PsZSly82_94O3ZwEQhjAPLlGFGu9O-25euQFQnVsx2t7CG3w2ne0iDl2CqfSfn1Ougjv1npFJguMMGDO6ELI7r8nUX5XIbcabjIk-H-Ob1vIIMDWUg/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/AVvXsEiqHqFOySllTwclJbRkyrviZY4TzXVUNGiVWKx7dg6NF1d-mUMUad1b4cQFJBC1QULk396J46SDQfnnCgkuHX1Zcx3ObDYFeZmYq_14xzPTQG-2TjZdXiFJOMOjRq-zcxnYbwMW0P-fn1A/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/AVvXsEis00RXcXQoCyD4hMWVtReiDh32meNOJQEa0MiSVg2b7Gt3Xeo_SGpcNFBDITplEAIB_nnzW_VvuaXrVjcGepBAJoinw7RbiQwbbFGJHwpDLd76vyJxbJY1fNRJXg1Qnw5C9hUT1mahAlM/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"> </div>
</div>
</div>
<!-- end slider 1 -->
.jpg)
.jpg)
