شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي

كود سلايدر أنيق وسهل التنسيق

زائر
زائر
تمت المشاركة في الثلاثاء سبتمبر 01, 2015 9:17 am
تذكير بمساهمة فاتح الموضوع :

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

اولا لنتعرف عن معنى سلايدر شو

السلايد شو أو السلايدر Slider هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار

صورة لسلايدر



http://i61.tinypic.com/2q37s52.gif

الكود متميز وذو شاشة سهل التحكم له مؤثر بالتنقل للموضوع الثاني

الان للكود تفضلوا

الكود:
<style type="text/css">


 #mcis {
  display: none;
 }

 #sliderFrame {
  position: relative;
  width: 600px;
  margin: 0 auto;
 border:5px solid #000;
 border-bottom:25px solid #000;
 background:#fff;
 border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;
 margin-bottom:5px;
 }
 #slider img {
  position: absolute;
  border: none;
 display: none;
 }

 #slider {
  width: 600px;
  height: 218px;
  background: #fff url(https://lh4.googleusercontent.com/-k6J7L0AmqnE/UV7FswW-qsI/AAAAAAAABC0/iwjr-yjs8Tg/s39/cnmuslidlod.gif) no-repeat 50% 50%;
  position: relative;
  margin: 0 auto;
  box-shadow: 0px 1px 5px #999999;
 }

 #slider a.imgLink {
  z-index: 2;
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
 }

 div.mc-caption-bg, div.mc-caption-bg2 {
  position: absolute;
  width: 100%;
  height: auto;
  padding: 0;
  left: 0px;
  bottom: 0px;
  z-index: 3;
  overflow: hidden;
  font-size: 0;
 }

 div.mc-caption-bg {
  background-color: black;
 }

 div.mc-caption {
  font: bold 14px/20px Arial;
  color: #EEE;
  z-index: 4;
  padding: 10px 0;
  text-align: center;
 }

 div.mc-caption a {
  color: #FB0;
 }

 div.mc-caption a:hover {
  color: #DA0;
 }

 div.navBulletsWrapper {
  top:225px;
 background: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
 }

 div.navBulletsWrapper div {
  width: 11px;
  height: 11px;
  background:transparent url(https://lh5.googleusercontent.com/-7NRCeJsVpFQ/UV7Fs6xP8RI/AAAAAAAABCw/REtO-oLoX7Q/s22/cnmu-sliddot.png) no-repeat 0 0;
  float: left;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 11px;
  _position: relative;
 }



 div.navBulletsWrapper div.active {
  background-position: 0 -11px;
 }

 #slider {
  transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
 }
  </style>

 <script src="https://cnmu.googlecode.com/svn/trunk/cnmuslid.js" type="text/javascript"></script>

 <div id="sliderFrame">
                 <div id="slider">
<a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
 <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
 </div></div>

شرح الكود

بالنسبة للرقم 600 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 218 هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا 225 فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة
أما هذا الكود #000 وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك أكواد الألوان
أما هذا الكود <a href="رابط الموضوع"><img src="رابط الصورة" alt="عنوان الموضوع"/></a>
هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه
ملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده
 فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218
إذا الصورة ستكون بحجم 600x218

طريقة التركيب

يوضع الكود فى اى مكان يقبل HTML

عند النقل اذكر المصدر

رد: كود سلايدر أنيق وسهل التنسيق

رئاسة فريق الدردشة

عدد المساهمات : 6239

معاينة صفحة البيانات الشخصي للعضوhttp://bank.ahlamontada.com/
تمت المشاركة في الأحد فبراير 07, 2016 6:11 pm
كوددد جميل
شكككرآ   ~

رد: كود سلايدر أنيق وسهل التنسيق

زائر
زائر
تمت المشاركة في الثلاثاء فبراير 09, 2016 2:24 pm
منور الموضوع

رد: كود سلايدر أنيق وسهل التنسيق

avatar
بصمة خالدة
الجنس : ذكر

الاسد

عدد المساهمات : 23062

نقاط النشاط : 26540

السٌّمعَة : 90

بلد العضو :

العمر : 37

معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com/
تمت المشاركة في الخميس فبراير 11, 2016 8:51 am
جزاك الله خير دمتي في حمي الرحمن
التوقــيـــــــــــــــــــــع

رد: كود سلايدر أنيق وسهل التنسيق

زائر
زائر
تمت المشاركة في الأحد فبراير 14, 2016 6:48 pm
منور الموضوع

رد: كود سلايدر أنيق وسهل التنسيق

avatar
عضو نشيط
الجنس : ذكر

عدد المساهمات : 134

نقاط النشاط : 257

السٌّمعَة : 13

بلد العضو :

معاينة صفحة البيانات الشخصي للعضوhttp://totwerkm.ibda3.info/
تمت المشاركة في الأحد فبراير 14, 2016 8:53 pm
جميل ولكن انت الاجمل بمواضيعك الحصريه
التوقــيـــــــــــــــــــــع


وردة حمراء  وردة حمراء ahmedkhalifa وردة حمراء  وردة حمراء










painting painting painting painting painting جارى جارى جارى gfifeee

رد: كود سلايدر أنيق وسهل التنسيق

زائر
زائر
تمت المشاركة في الأحد فبراير 14, 2016 9:05 pm
منور الموضوع

رد: كود سلايدر أنيق وسهل التنسيق

avatar
بصمة خالدة
الجنس : ذكر

الجدي

عدد المساهمات : 1691

نقاط النشاط : 1794

السٌّمعَة : 9

بلد العضو :

العمر : 19

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في السبت مارس 05, 2016 2:40 am
شكرا
التوقــيـــــــــــــــــــــع



                                
                     
                                



رد: كود سلايدر أنيق وسهل التنسيق

زائر
زائر
تمت المشاركة في الثلاثاء مايو 17, 2016 7:48 pm
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي

رد: كود سلايدر أنيق وسهل التنسيق

avatar
بصمة خالدة
الجنس : ذكر

السمك

عدد المساهمات : 11065

نقاط النشاط : 11882

السٌّمعَة : 70

بلد العضو :

العمر : 22

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء يوليو 12, 2016 11:51 pm
شكر جزيلا للطرح القيم
ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي وتقديري لك
@CLARO@
التوقــيـــــــــــــــــــــع

رد: كود سلايدر أنيق وسهل التنسيق

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 5:59 pm

كود جميل شكرا لك

رد: كود سلايدر أنيق وسهل التنسيق

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 10:28 pm
منور الموضوع
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
Propellerads                                                                           Propellerads