منتدى الدعم العربي
أخي أو أختي :
اسمح لي بأن أحييك .. وأرحب بك
فكم يسرنا ويسعدنا انضمامك لعائلتنا المتواضعة
التي لطالما ضمها منتدانا الغالي على قلوبنا
وكم يشرفني أن أقدم لك .. أخـوتنا وصداقـتـنا
التي تتسم بالطهر والمشاعر الصادقة
التي تنبع من قلوب مشرفيّ وأعضاء
هذا المنتدى السامي
أهــلا بك
منتدى الدعم العربي


 
الرئيسيةالرئيسية  س .و .جس .و .ج  بحـثبحـث  الأعضاءالأعضاء  المجموعاتالمجموعات  التسجيلالتسجيل  دخولدخول  

شاطر | 
 

  كود سلايد شو

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
Admin
ادارة عامة
ادارة عامة
avatar

عدد المساهمات : 175
السٌّمعَة : 0
تاريخ التسجيل : 07/09/2015
العمر : 16
الموقع : http://mobdi3.lolbb.com

مُساهمةموضوع: كود سلايد شو   الأحد أكتوبر 25, 2015 5:36 pm

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

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

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





http://i18.servimg.com/u/f18/19/01/44/56/2015-012.png

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

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

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

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





الرمز:
الكود:
<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>


بالتوفيق للجميع
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://mobdi3.lolbb.com
 
كود سلايد شو
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الدعم العربي :: دعم المواقع :: اكواد حصرية-
انتقل الى: