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

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

♥ معاينـــــــــــــــــة ♥

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

اذهب الى لوحة التحكم >> التخطيط >> اضافة أداة >> Html/Javascript

ضع بها هذا الكود

<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/AVvXsEhRUNliyl5kkCfWb_983vjXfbJrUuGzVj2sgtv2ntxnyZbZ-SbwllYEcPTHV40xhBRJH0sgjYE_BQgIZPZHh-5HvI-MQVqL_UkBT7vldqhk8boIN01PMx1rZwbd-HhOaL0j9abm6ABsMFs/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/AVvXsEhdh4ImgnFzSotfOM4ugNadPFMsWNDNBmUcEmqJyWWUU833vYM_wHGqS1dmxYarn-3mnVSow_RoH7fUzAAEPnbiJ6DN7dYKkUtd51ztthNW1vHkahLLHmvAjDYHoyjKx_tRTkAilwXTk2s/s1600/carousel1-prev.png) no-repeat 0 0; left: -13px;}

.slider1 .slider-holder .carousel-next { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnDS3rRJ3nr0wJapmix_vGG16-NRUycsSc30jAVKmzNXYRHx0JiSZ4eRM2W-lP06BoT1CRkUFuJIpzVWW4WzSxPv_NOo77EIQhJ9TNxQpnpY011jLKM4R7f0bC8DZf4QIvStXlRs6c1k/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/AVvXsEjLqTHfF71FRic3fG5viW3qEh4vVg2nioI3lMuCRtRYpSj-2vdqOk696uyBrEx1KahqgZeRvTY7FICnjsG5F_qgBdsn_vArCUAujFHDv7aDKlD_0Wvmq-NSiKQVlL3Q6nV8mg-FaLfP2RY/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/AVvXsEheN-DqoZV4xHtyvSzo4QscEirl1HfeibUuYKoUf6_cmsNRXMbFo4GSjRZx42v0vJbjCixJPeADyYdNYLfiYB2G6Jz1lT0y869UQfaPuSLIYXSJ1GhyphenhyphenoEwGWOiI8i-kXYi47UGmztLxf_s/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/AVvXsEiIvaEytovQxCxHraDeGjdNSB8FOc352_B6hQLTorrsFb_8A_mTpWHHMUUoyCxczBqw6N4yydLyymRo9F2HVC1kyNZlkfo-aT47BbkZX_U3w2N88HWc2NC97ElOw0ivX1BLqwqFvtwFBQg/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/AVvXsEgMDt5t9aUaIhA1mseGeQdOXTtL99JmspFgWiNt7urUaDkt-cqC42RFZ6rhyphenhyphenLYd6InNxMZS9evPoTf_T7l126rte6N8gySZ7oB2nxgVTWO0fq1ZndYpUQnMkGJZl66u3vyho3gafO2tQIs/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/AVvXsEjoi8HLJ8gWc1sh9j8F6wT_GVRc4yyUunsbaICpB1RCcRoZ2JndF213o9B6NqikmiRNvXhRN_JIkViBvZP7Cwv1Mt0ueWfO13fn8NHZH2l_kAR6i05kShqFFFavgtrWzp7xzmxVpdsE-gg/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>



<div class="slider1">

<div class="shell">



<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>



<div class="cl"> </div>

</div>

</div>

