سلايد شو احمر وازرق لاحلى منتدى

5 مشترك

The Best :: مساحات حرة :: ●● تكنلوجيات :: ●● تطوير المواقع و المنتديات

صفحة 3 من اصل 3 • 1, 2, 3

الصفحة التالية

الصفحة السابقة

سلايد شو احمر وازرق لاحلى منتدىالأربعاء 8 مارس 2023 - 19:21

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

السلام عليكم ورحمة الله وبركاتة
سلايد شو ازرق يدوي واحمر تلقائي

سلايد شو احمر وازرق لاحلى منتدى - صفحة 3 Aa_ci719

------------------------------------------

سلايد شو احمر وازرق لاحلى منتدى - صفحة 3 Aa_ci720

------------------------------------------

سلايد شو احمر وازرق لاحلى منتدى - صفحة 3 Aa_ci722

----------------------------------------

تصميم سلايد شو كان صعب واحتجت ايام حتى انتهي منه
عكس ماكنت متوقع
لكن انتهيت منه والحمدلله,

السلايد شو الازرق مكون من

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

السلايد شو الاحمر مكون من

ثلاث مجموعات
كل مجموعة فيها اربع صور بروابط
يتحرك تلقائي (يعني يتحرك من كيفه كل ثلاث ثواني تقريبا)

وطبعا كل واحد يقدر يزيد عدد الصور والمجموعات كما يريد سلايد شو احمر وازرق لاحلى منتدى - صفحة 3 Star3

-----------------------------------------------------

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

اول شي اذهب الى لوحة الادارة > إدارة عامة >
الرسائل و الإيميلات > الإعلانات الخاصة
ثم اجعل الاعدادات كما في الصورة

سلايد شو احمر وازرق لاحلى منتدى - صفحة 3 Aa_ci721

ثم اضغط اضافة
إسم : كما يحلو لك
محتوى * : اضف كود السلايد شو

:كود السلايد شوو الازرق :

الكود:

<style>
.mySlides-conan2000 {display: none;}
 .mySlides-conan2000 img {
      margin-right: 3px;
    height: 145px;
    width: 200px;
    box-shadow: 0px 0px 6px 0px #2196f3;
    border: solid #fff 5px;
}
@media  (max-width: 800px) {
.mySlides-conan2000 img {
    height: 145px !important;
    width: 23% !important;
}
}

  .mySlides-conan2000 img:hover {
transform: scale(1.1);  
box-shadow: 0px 0px 6px 0px #000;
    border: solid #fff 5px;
}  
#slideshow-left, #slideshow-right {
    padding: 7px;
    background: #0cc7b78c;
    position: absolute;
    z-index: 100;
    top: 30%;
    color: #FFF;
    font-size: 30px;
    cursor: pointer;
}
#slideshow-left {
 border-radius: 25px 0px 0px 25px;
  right: 0;
}
#slideshow-right {
    border-radius: 0px 25px 25px 0px;
    left: 0;
}
   .text-conan2000 {
    background: #064f89;
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    width: auto;
    text-align: center;
}
.slideshow-container {
    border: #7b838b 1px dashed;
    background: #d9d9d9;
    overflow: hidden;
    width: fit-content;
    padding: 10px 5px;
    position: relative;
    margin: auto;
}
 
.textt-conan2000 {
    font-size: 22px;
    color: #0c0d0e;
    text-align: center;
}
 

 .mySlides-conan2000 {
    text-align: center;
    padding-top: 7px;
    padding-bottom: 40px;
}
.dot-conan2000 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active-conan2000 {
  background-color: #717171;
}
 
.fadeD {
  animation-name: fadeD;
  animation-duration: 1.5s;
}
@keyframes fadeD {
  from {transform: translate(-1000px, 0px);}
  to {opacity: 1}
}
 
.fadeG {
  animation-name: fadeG;
  animation-duration: 1.5s;
}
@keyframes fadeG {
  from {transform: translate(1000px, 0px);}
  to {opacity: 1}
}
 

</style>
<div class="slideshow-container">
                      
 <div class="mySlides-conan2000">
             <a href="link ">          <img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" />       </a>       <a href="link">          <img src="https://2img.net/u/1511/17/19/70/avatars/1-79.jpg" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223793-72.gif" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223857-91.png" />       </a>               
 <div class="textt-conan2000">
        مجموعة واحد1          
 </div>
                    
 </div>
                      
 <div class="mySlides-conan2000">
             <a href="link ">          <img src="https://2img.net/r/frmste/images/sigle.png" />       </a>       <a href="link">          <img src="https://2img.net/u/1511/17/19/70/avatars/1-79.jpg" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223793-72.gif" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223857-91.png" />       </a>               
 <div class="textt-conan2000">
        مجموعة ثنين2          
 </div>
                    
 </div>
                  
 <div class="mySlides-conan2000">
                   <a href="link ">          <img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" />       </a>       <a href="link">          <img src="https://2img.net/u/1511/17/19/70/avatars/1-79.jpg" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223793-72.gif" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223857-91.png" />       </a>               
 <div class="textt-conan2000">
        مجموعة ثلاثه3          
 </div>
                    
 </div>
                          
 <div class="text-conan2000">
       اعلانات المنتدى        
 </div>
                
 <div id="slideshow-left">
       ❮        
 </div>
                  
 <div id="slideshow-right">
       ❯        
 </div>
</div><br />
<div style="text-align:center">
        <span class="dot-conan2000"></span>  <span class="dot-conan2000"></span>  <span class="dot-conan2000"></span>
</div><script>
const slides = document.getElementsByClassName("mySlides-conan2000");
const dots = document.getElementsByClassName("dot-conan2000");
let timeoutID;
let slideIndex = 1;
showSlides();
 
function resetSlide(){
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  slides[i].classList.remove("fadeD", "fadeG");
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active-conan2000");
  }
}
 
function nextSlide(){
  resetSlide();
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex-1].classList.add("fadeD");
}
 
function prevSlide(){
  resetSlide();
  slideIndex--;
  if (slideIndex < 1) {
    slideIndex = slides.length;
  }
  slides[slideIndex-1].classList.add("fadeG");
}
 
function showSlides() {
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].classList.add("active-conan2000");
 
  timeoutID = setTimeout(() => {
    nextSlide();
    showSlides();
  }, 99999999999999);  // Change image every 2 seconds
}
 
$('.dot-conan2000').click(function(){
  clearTimeout(timeoutID);
console.log(slideIndex);
  slideIndex = $('.dot-conan2000').index(this);
  console.log(slideIndex);
 
  nextSlide();
  showSlides();
});
 
$('#slideshow-left').click(function(){
  clearTimeout(timeoutID);
 
  prevSlide();
  showSlides();
});
 
$('#slideshow-right').click(function(){
  clearTimeout(timeoutID);
 
  nextSlide();
  showSlides();
});
</script>

:كود السلايد شوو الاحمر :

الكود:

<style>
.mySlides-konan2000 {display: none;}
 .mySlides-konan2000 img {
      margin-right: 3px;
    height: 145px;
    width: 200px;
box-shadow: 0px 0px 5px 1px #f5005330;
    border: dotted #FCE4EC 1px;
}
@media (max-width: 980px) {
 .mySlides-konan2000 img {
    height: 130px !important;
    width: 22% !important;
}
}
  .mySlides-konan2000 img:hover {
transform: scale(1.1);  
box-shadow: 0px 0px 6px 0px #f44336;
    border: solid #fff 5px;
}  
#slideshow-left, #slideshow-right {
    padding: 7px;
    background: #cb004570;
    position: absolute;
    z-index: 100;
    top: 30%;
    color: #FFF;
    font-size: 30px;
    cursor: pointer;
}
#slideshow-left {
 border-radius: 25px 0px 0px 25px;
  right: 0;
}
#slideshow-right {
    border-radius: 0px 25px 25px 0px;
    left: 0;
}


   .text-konan2000 {
    background: #cb0045;
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    width: auto;
    text-align: center;
}
.slideshow-container {
   border: #cb0045 dotted 1px;
    background: #8b878847;
    overflow: hidden;
    width: fit-content;
    padding: 10px 5px;
    position: relative;
    margin: auto;
}
 
.textt-konan2000 {
    font-size: 22px;
    color: #0c0d0e;
    text-align: center;
}
 

 .mySlides-konan2000 {
    text-align: center;
    padding-top: 7px;
    padding-bottom: 40px;
}
.dot-konan2000 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active-konan2000 {
  background-color: #717171;
}
 
.fadeD {
  animation-name: fadeD;
  animation-duration: 1.5s;
}
@keyframes fadeD {
  from {transform: translate(-1000px, 0px);}
  to {opacity: 1}
}
 
.fadeG {
  animation-name: fadeG;
  animation-duration: 1.5s;
}
@keyframes fadeG {
  from {transform: translate(1000px, 0px);}
  to {opacity: 1}
}

</style>
<div class="slideshow-container">
                                              
 <div class="mySlides-konan2000">
                        <a href="link ">          <img src="https://2img.net/280x/i.servimg.com/u/f20/16/85/77/67/aao_ao13.png" />       </a>       <a href="link">          <img src="https://2img.net/280x/i.servimg.com/u/f20/16/85/77/67/icons-10.png" />       </a>       <a href="link">          <img src="https://2img.net/280x/i.servimg.com/u/f20/16/85/77/67/12222210.jpg" />       </a>       <a href="link">          <img src="https://2img.net/280x/i.servimg.com/u/f11/20/49/63/45/30ee3910.jpg" />       </a>                           
 <div class="textt-konan2000">
                   مجموعة واحد1                      
 </div>
                                            
 </div>
                                              
 <div class="mySlides-konan2000">
                        <a href="link ">          <img src="https://2img.net/r/frmste/images/sigle.png" />       </a>       <a href="link">          <img src="https://2img.net/u/1511/17/19/70/avatars/1-79.jpg" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223793-72.gif" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223857-91.png" />       </a>                           
 <div class="textt-konan2000">
                   مجموعة ثنين2                      
 </div>
                                            
 </div>
                                          
 <div class="mySlides-konan2000">
                              <a href="link ">          <img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" />       </a>       <a href="link">          <img src="https://2img.net/u/1511/17/19/70/avatars/1-79.jpg" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223793-72.gif" />       </a>       <a href="link">          <img src="https://2img.net/u/1811/68/54/94/avatars/223857-91.png" />       </a>                           
 <div class="textt-konan2000">
                   مجموعة ثلاثه3                      
 </div>
                                            
 </div>
                                                  
 <div class="text-konan2000">
                  اعلانات المنتدى                    
 </div>
                                        
 <div id="slideshow-left">
                  ❮                    
 </div>
                                          
 <div id="slideshow-right">
                  ❯                    
 </div>
</div><br />
<div style="text-align:center">
                   <span class="dot-konan2000"></span>  <span class="dot-konan2000"></span>  <span class="dot-konan2000"></span>
</div>
 <script>
const slides = document.getElementsByClassName("mySlides-konan2000");
const dots = document.getElementsByClassName("dot-konan2000");
let timeoutID;
let slideIndex = 1;
let hovering = false;

showSlides();

function resetSlide() {
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    slides[i].classList.remove("fadeD", "fadeG");
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active-konan2000");
  }
}

function nextSlide() {
  resetSlide();
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1;
  }
  slides[slideIndex - 1].classList.add("fadeD");
}

function prevSlide() {
  resetSlide();
  slideIndex--;
  if (slideIndex < 1) {
    slideIndex = slides.length;
  }
  slides[slideIndex - 1].classList.add("fadeG");
}

function showSlides() {
  if (!hovering) {
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].classList.add("active-konan2000");

    timeoutID = setTimeout(() => {
      nextSlide();
      showSlides();
    }, 5000); // Change image every 5 seconds
  }
}

$('.dot-konan2000').click(function () {
  clearInterval(timeoutID);
  slideIndex = $('.dot-konan2000').index(this);
  nextSlide();
  showSlides();
});

$('#slideshow-left').click(function () {
  clearInterval(timeoutID);
  prevSlide();
  showSlides();
});

$('#slideshow-right').click(function () {
  clearInterval(timeoutID);
  nextSlide();
  showSlides();
});

$('.mySlides-konan2000').hover(
  function () {
    hovering = true;
    clearTimeout(timeoutID);
  },
  function () {
    hovering = false;
    showSlides();
  }
);
</script>

وكل اللي عليك الان انك تستبدل صور السلايد شوو بصور من عندك
واستبدل كلمة link برابط من عندك
-------------------------------------------------

ملاحظة
يمكنك وضع السلايد شو بالتشكيلات العامة ايضا
لكن لا يصلح وضعه في التومبيلات

و بالاخير ان شاء الله يكون اعجبكم التصميم

و وفق الله الجميع

_____________________________________
تم تصميم السلايد شو بواسطة كونان2000,
عن طريق موقع w3schools المتخصص لتعليم لغات تطوير الويب,
وتمت اضافة النقاط بالاسفل واضافة السهم الايمن والايسر على السلايد شو بواسطة العضو Toryudo

رد: سلايد شو احمر وازرق لاحلى منتدىالإثنين 6 مايو 2024 - 18:23

تم التعديل ~

بوركت جهودك كونان

Akatsuki فريق الإدارة

: THE HUNTERS LEADER
عدد المساهمات :: 198836

القطع الذهبية :: 3332
الكريستالات :: 15
العمر :: 31
البلد :
تاريخ التسجيل :: 01/12/2008
لون البيانات :

الجوائز والأوسمة

فخر المنتدى

[ 50000 ] مشاركـة

مميز بردوده

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

ملك الحصريات

[ 50 ] موضوع حصري

نجم المنتدى

[ 100 ] موضوع

مميز في [ صالة الإستقبـال ]

مميز في [ الفعاليـات و المسابقات ]

مميز في [ ملتقى الأعضاء ]

صاحب مدونة مميزة

مميز في [ تسالي و ألعاب ]

معرض تصاميم مميز

متجر تصاميم مميز

مميز في [ دروس التصميم ]

مميز في [ حقيبـة المصمم ]

مميز في [ ألبـوم الصور ]

مسابقة تحليل الشخصيات - المركز 1

المركز الاول مسابقة المواضيع 2022

المركز الاول مسابقة الردود 2022

المركز الثاني مسابقة التصميم 2022

المركز الاول مسابقة التقارير 2022

المركز الثاني مسابقة القصة القصيرة 2022

المركز الاول مسابقة النشاط المطلق 2022

الهيمنة الإبداعية في المهرجان الشتوي 2022

وسام المشاركة في المهرجان الشتوي 2022

أفضل مصمم ( وسام شهري )

نجم فريق الترجمة

3 تميزات شهرية في فريق الترجمة

سهرة العيد 2022 - المركز 3

سهرة العيد 2022 - كوميدي السهرة

سهرة يونيو 2022 - المركز 3

حرب القروبات 2022 - المركز 2

المركز الثاني انجل ضد الجميع 2022

مشارك سهره العيد

المركز الثاني مسابقة المواضيع 2023

المهرجان الصيفي

المركز الثاني مسابقة الردود 2023

المهرجان الصيفي

المركز الثالث مسابقة التصميم 2023

المهرجان الصيفي

المركز الثاني مسابقة التقارير 2023

المهرجان الصيفي

المركز الاول مسابقة القصة القصيرة 2023

المهرجان الصيفي

المركز الثاني مسابقة النشاط المطلق 2023

المهرجان الصيفي

الهيمنة الإبداعية في المهرجان الصيفي 2023

وسام للمشاركين الذين قدموا مشاركات مميزة في عدة مسابقات من المهرجان

وسام المشاركة في المهرجان الصيفي 2023

المركز الثاني حرب القروبات 2023

نبراس الفريق

6 تميزات شهرية في فريق الترجمة

مميز في [ عالم السيارات ]

مميز في [ قسم فلسطيـن ]

مميز في [ حروف مبعثـرة ]

مميز في [ مأكولات و أطبـاق ]

مميز في [ ثقـافة و علوم ]

مميز في [ بلدان و حضارات ]

مميز في [ الدراسة و التعليم ]

مميز في [ عالم اللغة العربية ]

مميز في [ مكتبة المنتدى ]

مميز في [ إسلاميـات ]

كاتب روايات مميز

قارئ روايات مميز

مميز في [ عــالم التصميـم ]

مميز في [ فضاء الأنمي ]

مميز في [ صور الأنمي ]

مميز في [ تقارير الأنمي ]

رافع أنمي مميز

مميز في [ فضاء المانجا ]

مميز في [ تقارير المانجا ]

مترجم مميز

مدقق مميز

مبيض مميز

محرر مميز

متعدد مواهب في فريق الترجمة

مصمم مميز

تقديم تصاميم مميزة و تلبية طلبات الأعضاء

السهرة الشتوية 2024 - المركز 2

وسام المشاركة في السهرة الرمضانية

2024

سهرة الربيع 2024 - الفائز

سهرة الربيع 2024 - المهرج

رد: سلايد شو احمر وازرق لاحلى منتدىالأربعاء 8 مايو 2024 - 5:12

شكرا جزيلا على الكود الجميلة

دمعه السعودية فريق الإشراف

: ●● إشراف حلقات الأنمي
عدد المساهمات :: 4806

القطع الذهبية :: 290
الكريستالات :: 1
البلد :
تاريخ التسجيل :: 13/10/2022
لون البيانات :

الجوائز والأوسمة

نجم المنتدى

[ 100 ] موضوع

السهرة الخريفية 2023 - وسام المشاركة

وسام العطاء

[ 2000 ] مشاركـة

مميز في [ تسالي و ألعاب ]

مميز في [ ساحـة الرياضة ]

مميز في [ حلقات الأنمي ]

مسابقة الشعلـة الملتهبـة 2024 - مشارك

سهرة الربيع 2024 - المهرج

عنوان الموضوع	سلايد شو احمر وازرق لاحلى منتدى
BBCode

سلايد شو احمر وازرق لاحلى منتدى

descriptionسلايد شو احمر وازرق لاحلى منتدىالأربعاء 8 مارس 2023 - 19:21

descriptionرد: سلايد شو احمر وازرق لاحلى منتدىالإثنين 6 مايو 2024 - 18:23

descriptionرد: سلايد شو احمر وازرق لاحلى منتدىالأربعاء 8 مايو 2024 - 5:12

سلايد شو احمر وازرق لاحلى منتدىالأربعاء 8 مارس 2023 - 19:21

رد: سلايد شو احمر وازرق لاحلى منتدىالإثنين 6 مايو 2024 - 18:23

رد: سلايد شو احمر وازرق لاحلى منتدىالأربعاء 8 مايو 2024 - 5:12