كود سلايد شو احترافي للاعلانات مع معينة مباشرة

كود سلايد شو للاعلانات  اهداء من منتدي زحمة احساس
بالفعل كود جميل وممميز لن نطيل عليكم 
نتركككم مع صورة الكود

ولمشاهدة الكود مباشرة
اضغط هنا

الكود:

<div align="center">
                         
</div>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <style>
                <style>
.mySlides-konan2000 {display: none;}
 .mySlides-konan2000 img {
      margin-right: 3px;
    height: 145px;
    width: 200px;
    box-shadow: 0px 0px 6px 0px #f44336;
    border: solid #fff 5px;
}
@media (max-width: 800px) {
 .mySlides-konan2000 img {
    height: 145px !important;
    width: 23% !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: #ff085c7a;
    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: #e91e63;
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    width: auto;
    text-align: center;
}
.slideshow-container {
    border: #e91e63 1px dashed;
    background: #d9d9d9;
    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://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>       <a href="link">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>       <a href="link">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>       <a href="link">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>                
 <div class="textt-konan2000">
         مجموعة الاولى          
 </div>
                      
 </div>
                        
 <div class="mySlides-konan2000">
              <a href="link ">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>       <a href="link">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>       <a href="link">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>       <a href="link">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>                
 <div class="textt-konan2000">
         مجموعة الثانية          
 </div>
                      
 </div>
                    
 <div class="mySlides-konan2000">
                    <a href="link ">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>       <a href="link">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>       <a href="link">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>       <a href="link">          <img src="https://i.servimg.com/u/f69/18/97/49/48/11111110.jpg" />       </a>                
 <div class="textt-konan2000">
         مجموعة ثلاثه          
 </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;
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() {
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].classList.add("active-konan2000");
 
  timeoutID = setTimeout(() => {
    nextSlide();
    showSlides();
  }, 5000);  // Change image every 2 seconds
}
 
$('.dot-konan2000').click(function(){
  clearTimeout(timeoutID);
console.log(slideIndex);
  slideIndex = $('.dot-konan2000').index(this);
  console.log(slideIndex);
 
  nextSlide();
  showSlides();
});
 
$('#slideshow-left').click(function(){
  clearTimeout(timeoutID);
 
  prevSlide();
  showSlides();
});
 
$('#slideshow-right').click(function(){
  clearTimeout(timeoutID);
 
  nextSlide();
  showSlides();
});
</script>

:معاينة مباشرة

بارك الله فيك دمت في حمي الرحمن