css de yaşadığım slide problemi

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>

Afiyet olsun Efkancığım inşALLAH sorununu çözebilirsin

bir yerdende çıkma be her yer de varsın 7/24 r10 çalışanı

Sektörün nabzını yokluyoruz

Merhabalar,
Sizin sliderı aşağıdaki css kodları döndürüyor.
Javascriptin sliderla alakası yok. 4 aşama var keyframe de. 0, -100%, -200%, -300% dolayısıyla. Bu 4 görselde infinite olup sürekli tekrarlanıyor.

@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%);
}
}

Doğru mesela şöyle artırırsan 5 sonuç alırsın

/*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%);
}
90%{
transform: translateX(-300%);
}
95%{
transform: translateX(-400%);
}
100%{
transform: translateX(-400%);
}

bunu 7 veya 8 e nasıl cıkartabilirim peki ?

0%{ - 100%{ arasında kaç adet göstermek istiyorsan eşit parçaya böleceksin

şöyle yaptım ama olmadı nerede hata yapmış olabilirim

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%);
}
90%{
transform: translateX(-300%);
}
91%{
transform: translateX(-400%);
}
92%{
transform: translateX(-400%);
}
93%{
transform: translateX(-500%);
}
94%{
transform: translateX(-500%);
}
95%{
transform: translateX(-600%);
}
96%{
transform: translateX(-600%);
}
100%{
transform: translateX(-700%);
}
100%{
transform: translateX(-700%);
}