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

شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي
avatar
ادارة عامة
ادارة عامة
عدد المساهمات : 176
السٌّمعَة : 0
تاريخ التسجيل : 07/09/2015
العمر : 16
الموقع : http://mobdi3.lolbb.com
معاينة صفحة البيانات الشخصي للعضو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>


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