السلام عليكم ورحمة الله وبركاته

اليوم وطريقة راائعة جديدة
كود اللهم بلغنا رمضان على اليسار

اترككم مع صورة توضيحية لعمل الكود المتميز



كود سلايد شو 2015-012

https://i.servimg.com/u/f18/19/01/44/56/2015-012.png

طريقة تركيب الكود سهلة

اى مكان يقبل الهتمل

وقم باضافة الكود التالي هناك

المحتوى مخفي : قم باضافة مساهمة بالموضوع ليظهر لك الكود

كود سلايد شو 324166568


الرمز:

Code:

<style>
.image_carousel {
   padding-right:3px;
   position: relative;
}
.image_carousel a {
display: block;
float: left;
}
.image_carousel img {
   border: 1px solid #ccc;
   background-color:#fff;
   padding: 6px;
   margin: 5px;
   display: block;
   float: left;
}

.image_carousel img:hover {

   border: 1px solid #DDD;
   -moz-box-shadow: 0 1px 5px #555;
    -webkit-box-shadow: 0 1px 5px #555;
    box-shadow: 0px 1px 5px #555;

}

.image_carousel img:hover {
   border: 1px solid #DDD;
   -moz-box-shadow: 0 1px 5px #555;
    -webkit-box-shadow: 0 1px 5px #555;
    box-shadow: 0px 1px 5px #555;

}
.image_carousel:hover > a.prev{
   overflow: visible; opacity:1;left: 20px;}
.image_carousel:hover > a.next{
   overflow: visible; opacity:1;right: 20px;}
a.prev,a.next{ background-color:#46a2d3;
   overflow: hidden;
   opacity: 0;
   cursor: pointer;
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   transition: all .5s ease;}
a.prev {
   background-image: url(http://different.kariya-host.com/vb/nano_za3im_v1/img/left.png);
   background-repeat:no-repeat;
   width: 40px;
   height: 40px;
   display: block;
   position: absolute;
   top: 60px;left: -32px;
}
a.next{
   background-image:url(http://different.kariya-host.com/vb/nano_za3im_v1/img/right.png);
   background-repeat:no-repeat;
   width: 40px;
   height: 40px;
   display: block;
   position: absolute;
   top: 60px;right: -32px;
}

a.prev:hover ,a.next:hover{ opacity:0.7 !important;}

a.prev span, a.next span {
   display: none;
}
</style>
<script src="http://different.kariya-host.com/vb/nano_za3im_v1/js/jquery.min.js"></script>
  <script src="http://different.kariya-host.com/vb/nano_za3im_v1/js/jquery.easing.js"></script>
  <script src="http://different.kariya-host.com/vb/nano_za3im_v1/js/jquery.carouFredSel-5.5.0.js"></script>
  <script type="text/javascript">
$(document).ready(function() {  
                $('#foo1').carouFredSel({
               auto: {pauseDuration: 2000, delay: 375},
               prev: '#foo1_prev',
               next: '#foo1_next',
            });
});
            
</script>
<!--[if IE 7]>
<style type="text/css">
.image_slider{display:none;}
</style>
<![endif]--><div
 class="image_slider" style="width: 980px;margin: 0px auto;height:
170px; overflow:hidden;"> <div class="image_carousel">
    <div id="foo1">

    <a href="#">
  
    <img
src="http://different.kariya-host.com/vb/nano_za3im_v1/img/slider/1.png"
 alt="" width="220" height="150" /></a>

        <a href="#">
  
        <img
src="http://different.kariya-host.com/vb/nano_za3im_v1/img/slider/2.png"
 alt="" width="220" height="150" /></a>
        
        <a href="#">
  
        <img
src="http://different.kariya-host.com/vb/nano_za3im_v1/img/slider/3.png"
 alt="" width="220" height="150" /></a>

        <a href="#">
  
        <img
src="http://different.kariya-host.com/vb/nano_za3im_v1/img/slider/4.png"
 alt="" width="220" height="150" /></a>
    <a href="#">
  
    <img
src="http://different.kariya-host.com/vb/nano_za3im_v1/img/slider/1.png"
 alt="" width="220" height="150" /></a>

        <a href="#">
  
        <img
src="http://different.kariya-host.com/vb/nano_za3im_v1/img/slider/2.png"
 alt="" width="220" height="150" /></a>
        
        <a href="#">
  
        <img
src="http://different.kariya-host.com/vb/nano_za3im_v1/img/slider/3.png"
 alt="" width="220" height="150" /></a>

        <a href="#">
  
        <img
src="http://different.kariya-host.com/vb/nano_za3im_v1/img/slider/4.png"
 alt="" width="220" height="150" /></a>
 

    </div>
    <div class="clear"></div>
    <a class="prev" id="foo1_prev" href="#"><span>prev</span></a>
    <a class="next" id="foo1_next" href="#"><span>next</span></a>
</div></div>



بالتوفيق للجميع