اليوم اقدم لكم سلايدر شو احترافى الذي يتميز بالأناقة والجمال والخفة وسهولة التركيب كما يتميز بالحركة الممتازة .
طريقة التركيب
اذهب الى لوحة التحكم >> التخطيط >> اضافة أداة >> 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(http://1.bp.blogspot.com/-ZGSY9zn_hc...me1-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(http://3.bp.blogspot.com/-DWwEIcbfCC...usel1-prev.png) no-repeat 0 0; left: -13px;} .slider1 .slider-holder .carousel-next { background: url(http://3.bp.blogspot.com/-2P0WWy0pwV...usel1-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(http://2.bp.blogspot.com/-MnUPP8U9Ba...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(http://4.bp.blogspot.com/-BvJ55wA8bg...tom-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(http://4.bp.blogspot.com/-LezC8DE7rg...er2-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(http://1.bp.blogspot.com/-SRQuf_bLgH...ousel-down.png) no-repeat 0 0; right: 63px;} .slider2 .slider-holder .slider-bar .carousel-up { background: url(http://4.bp.blogspot.com/-ZMAJ7lE77O...arousel-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 --> |
قم بتغيير IMAGE URL برابط الصورة
قم بتغيير # بالرابط الذى توصل اليه الصورة