U3F1ZWV6ZTExOTUzOTE2MjY4X0FjdGl2YXRpb24xMzU0MjEzODExMTE=
recent
أخبار ساخنة

سلايد شو احترافى جدا بمميزات خرافيه يعمل حسب التسميات سلايد قالب تصميمي

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

سلايد شو احترافى جدا بمميزات خرافيه يعمل حسب التسميات سلايد قالب تصميمي


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

معاينة السلايد 



صورة من السلايد


سلايد شو احترافى جدا بمميزات خرافيه يعمل حسب التسميات سلايد قالب تصميمي


شرح تركيب سلايد قالب تصميمي


سوف تبحث أولا عن هذا الوسم]]>وتقوم بضع الكود التالى فوقه

/* Slider */
.recent-slider{width:auto;padding:15px;background:#fff;border:1px solid #dddddd;border-top:3px solid #0B900C;margin-bottom:15px;position:relative;height:435px;overflow:hidden}
.nivoSlider,.top-l-slider .nivoSlider{width:100%;text-align:Center;overflow:hidden}
.nivo-box,.nivoSlider{overflow:hidden}
.nivoSlider{position:relative;height:400px}
.nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}
.top-l-slider .nivoSlider{position:relative;height:400px}
.top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:#fff;filter:alpha(opacity=0);opacity:0}
.nivo-box,.nivo-slice{z-index:5;position:absolute}
.nivo-box,.nivo-box img,.nivo-caption,.nivo-slice{display:block}
.nivo-slice{height:100%;top:0}
.nivo-caption{position:absolute;bottom:20px;left:20px;text-align:center;z-index:8;box-sizing:border-box;color:#fff;right:20px}
.nivo-caption p{text-align:right;display:inline-block;background-color:#000;margin-top:5px;font-size:11px;padding:10px;float:right}
.nivo-caption h3{text-align:right;padding:10px;background:#0B900C;float:right;font-size:18px;color:#fff}
.nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;font-size:0;display:block;width:30px;height:30px;cursor:pointer;background-color:rgba(0,0,0,0.59)}
.nivo-prevNav{left:10px}
.nivo-nextNav:before,.nivo-prevNav:before{position:Absolute;left:0;top:0;color:#fff;height:30px;width:30px;text-align:center;z-index:100;display:block}
.nivo-prevNav:before{content:"\f104";line-height:30px!important;font-family:fontawesome;font-size:20px}
.nivo-nextNav:before{content:"\f105";line-height:30px!important;font-family:fontawesome;font-size:20px}
.nivo-nextNav{right:10px}
.nivo-controlNav{text-align:center;z-index:9;top:30px;font-size:0;position:absolute;right:25px}
.nivo-controlNav a{cursor:pointer;display:block;width:15px;height:15px;background:#FFF;float:right;border-radius:10px;margin-right:5px}
.nivo-controlNav a.active{background:#0B900C}


بعد ذلك سوف تبحث عن هذا الوسموتقوم بوضع الكود التالى فوقه او فى بعض القوالب سوف تجد الوسم بهذا الشكلضع ايضا الكود فوقه
المصدر عالم المدون
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة