Merhaba arkadaşlar kafayı yedim css kodumda bir sorun var ve çözemiyorum 2 haftadır. Sorun şu ki ben bir slider oluşturdum slide kodu şu şekilde css kodu da aşağıdaki gibi ama saçma şekilde ben görsel olarak 4 den fazla görsel eklesem bile slide 4 görsel algılıyor yani 4 den fazla yüklediğim hiç bir resmi görmüyor 4 resmi döndürüyor ama benim 7 resim dondurmam lazım neden oluyor bu kodların içinde bununla ilgili bir şey de göremedim yardımcı olursanız çok mutlu olurum . Teşekkürler.

<div class="con1">
<!--Area of the images-->
   <div class="wrap1">
       <img src="id/Bronz.PNG">
      <img src="id/Silver.PNG">
      <img src="id/Gold.PNG">
      <img src="id/Platinum.PNG">
      <img src="id/diamond.PNG">
   </div>

</div>

<style type="text/css">/*The webpage has been designed*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



/*Basic structure of slider*/
.con1{
    width: 500px;
    top: 50%;
    left: 50%;
    overflow: hidden;
    border-radius: 8px;
}

/*Area of images*/
.wrap1{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}
/*Animation activated by keyframes*/
@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}</style>
<style type="text/css">.ornekclass{
display: none;
}
@media screen and (max-width:900px){
.ornekclass{
display: block;
}
}</style>
  <script type="text/javascript">var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {slideIndex = 1}
  x[slideIndex-1].style.display = "block";
  setTimeout(carousel, 2000); // Change image every 2 seconds
}</script>

<style type="text/css">.class {
display: none;
}
@media screen and (max-width:900px){
.yem{
display: block;
}
}</style>
<style type="text/css">@media only screen and (min-width: 768px) {
.yeni{
    display: block;
}
}</style>