The Best
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

The Bestدخول
●● إعلانـات ●●
إعلانك هنا إعلانك هنا إعلانك هنا
إعـلانـات المنتـدى

إحصائيات المنتدى
أفضل الاعضاء هذا الشهر
آخر المشاركات
أفضل الاعضاء هذا الشهر
294 المساهمات
224 المساهمات
144 المساهمات
78 المساهمات
78 المساهمات
77 المساهمات
56 المساهمات
46 المساهمات
24 المساهمات
21 المساهمات
آخر المشاركات

[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

+21
ahmedelbarry
khames
ELMssRyy
كونان2000
الاميرساسوكي
YoJene
S @ M e H
كويوكو تشان
محمد كركوك العراقي
Mahmoud Soltan
omarpop23
Casper
Zoolraqey
driss1978
princess soma
~ IMA
A Y A N O
نَــانواْ~مَـــافْ
Modal7arbi
goboy
Akatsuki
25 مشترك



×
النص



لون شفاف

الألوان الافتراضية
×
الخلفية



لون شفاف

الألوان الافتراضية
×
النص



لون شفاف

الألوان الافتراضية
×
الخلفية



لون شفاف

الألوان الافتراضية

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Empty[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
تذكير بمساهمة فاتح الموضوع :

[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 2020-017

بسم الله الرحمن الرحيم

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

يسرنا أن ننشر لكم كود السلايد شو الجديد الخاص بذا بست

و كما ترون فهو يعمل بدون مشاكل مع نسخة Modern BB و مع كل النسخ الأخرى بإذن الله

الكود من تصميم أخي رياض خصيصا للمنتدى جزاه الله خيرا

~

كود سلايد شو - اعلانات متحركة - أحلى منتدى


[ طريقة التركيـب ]

1- كود الجافا :

لوحة الإدارة >> عناصر إضافية >> HTML و JAVASCRIPT >> إدارة أكواد Javascript

تفعيل نظام إدارة أكواد Javascript : - نعـم

ثم : إنشاء كود جديد [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 2020-016

العنوان : سلايد شو

أضف الكود إلى : جميع الصفحات

[ محتوى مخفي | ضع ردا أولا ]



2- كود الـ CSS

لوحة الإدارة >> مظهر المنتدى >> الصور و الألوان >> ألوان >> ورقة تصميم css

الكود:


 /* سلايد شو THEB3ST.COM -------*/

/* Slideshow */
.theb3st-slideshow-container {
  --button-color-bg: #0CC7B7;
  --button-color-text: #fff;
  --img-color-bg: #fff;
  --img-color-shadow: #0CC7B7;

  position: relative;
  width: 896px;
  height: 200px;

  margin: 0 auto;
}
.theb3st-slideshow-container button {
  padding: 0;
  border: none;
}
.theb3st-slideshow-previous-slide,
.theb3st-slideshow-next-slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  height: 40px;
  width: 30px;

  font-size: 1.5rem;
  line-height: 100%;

  cursor: pointer;
  background-color: var(--button-color-bg);
  color: var(--button-color-text);
  opacity: 50%;
  transition: opacity 0.3s ease !important;
}
.theb3st-slideshow-previous-slide:hover,
.theb3st-slideshow-next-slide:hover {
  opacity: 90%;
}
.theb3st-slideshow-previous-slide {
  left: 0;
  border-radius: 0 15px 15px 0;
}
.theb3st-slideshow-next-slide {
  right: 0;
  border-radius: 15px 0 0 15px;
}
.theb3st-slideshow-slides-container {
  display: flex;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
}
.theb3st-slideshow-slide {
  height: 100%;
  width: auto;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  background-color: #ddd;
}
.theb3st-slideshow-slide img {
  box-sizing: content-box;
  height: 145px;
  width: 200px;

  padding: 6px;
  margin: 5px;

  border: 1px solid #ddd;
  background-color: var(--img-color-bg);

  transition: box-shadow 0.3s ease, transform 0.2s ease-in-out !important;
}
.theb3st-slideshow-slide img:hover {
  box-shadow: 0 0 10px var(--img-color-shadow);
  transform: scale(1.035, 1.035);
}
.theb3st-slideshow-slide a {
  width: auto;
  height: auto;
}
@media only screen and (max-width: 896px) {
  .theb3st-slideshow-container {
    width: 672px;
  }
}
@media only screen and (max-width: 672px) {
  .theb3st-slideshow-container {
    width: 448px;
  }
}
@media only screen and (max-width: 448px) {
  .theb3st-slideshow-container {
    width: 224px;
  }
}



3- كود HTML

لوحة الإدارة >> إدارة عامة >> الرسائل و الإيميلات >> الإعلانات الخاصة

أضف الكود في إعلان واحد جديد ( و لا تضف أي اعلانات أخرى حتى يعمل بشكل طبيعي )

+ تأكد من جعل الاعدادات هكذا :

[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 2020-018

الكود:

<div class="theb3st-slideshow-container">
                                    
   <div class="theb3st-slideshow-slides-container">
                                         
      <div class="theb3st-slideshow-slide">
</a>        <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />   

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

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

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

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

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

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

</a>        <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />   
 
      </div>
                     
   </div>
                  
   <button class="theb3st-slideshow-previous-slide" onclick="swipeSlideBS(this.parentElement,-1)">
                  ❯           
   </button>
                  
   <button class="theb3st-slideshow-next-slide" onclick="swipeSlideBS(this.parentElement,1)">
                  ❮           
   </button>
                
</div>



ما عليك إلا تكرار هذا الكود لاضافة المزيد من الاعلانات :

الكود:

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



~

جميع الحقوق محفوظة لـمنتدى ذا بست The Best | theb3st.com

يمنع النقـل دون ذكر المصدر كاملا مع رابط الموضوع ! و الله رقيب عتيد ~

[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 866468155 I love you

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
شكرا لكم على المرور

~

كونان نعتمد عليك لإصلاحه و جعله يعمل على مختلف النسخ Very Happy

فأعتقد أنه توقف عن التحرك منذ فترة


[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 866468155

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
اذا انا مو غلطان اظن ان المشكلة من الجافا [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 3533673080

ولا يهمك اختي Akatsuki
اذا لم استطع ايجاد اين الخطا
ان شاء الله راح اجيب لكم البديل

باسرع وقت ممكن باذن الله

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
مارئيكم بهذا البديل

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

وكذلك يتأقلم مع حجم الشاشه

كما في الصورة
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Froru11



هل هو جيد

يعني افتح موضوع مستقل فيه اربع بدائل من ضمنها الكود اعلاه


وهذي صور البدائل 

الثاني
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Froru210



الثالث
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Frorum14



الرابع
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Froru10

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
يب رهيييب خاصة الأول و الثاني ممتازان!

أحسنت عملا ~

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
شكرا لكي اختي Akatsuki
والله اني كنت ناوي احط لكم البدائل اليوم

لكن بالغلط انا دمجت الكود الاول مع الثاني وخرب الكود بالكامل
وماعندي نسخه احتياطيه [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 683463

ولما رحت ادوات الصيانه طلعت ترجعنا 7 ايام ورا


احتاج الى كتابة الكود من جديد
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 144658

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 1827762041

آآخ لا عليك و خذ كل وقتك ><

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
مشكورررررررررررررر

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
روعة شكرا لك 

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 Emptyجميل

more_horiz
شكرا
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 3 4B3veMB
 KonuEtiketleri عنوان الموضوع
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى
 Konu BBCode BBCode
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
remove_circleمواضيع مماثلة