CSS Fotoğraf Kaydırma Yardıma İhtiyacım Var

Sağdan sola doğru çektiğimde ne kadar sola kaydırsam o kadar sağdan resim gelsin istiyorum buraya eklenen resimleri döngü halinde olacak. Trendyolun resmi sitesinde markaların olduğu kısım gibi düşünebilirsiniz. 1. Resim benim kodlarımın çıktısı, 2. resim trendyolun sitesi resmi siteyi ziyaret ederseniz daha net anlayabilirsiniz. Ücretsiz yardımcı olabilecek olursa sevinirim bu isteğimin benzerini de sitenin aşşağısında listelenen ürünleri kaydırmak için yapmam gerekecek.

    <div class="kategori">
        <div class="kategoriler">
            <div class="markalar">
                <img class="logomarka" src="https://www.sketchappsources.com/resources/source-image/windows-logo-alesiamjau.png" width="40px">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://i.ibb.co/zS0hBLd/Ba-l-ks-z-2.png">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://www.edigitalagency.com.au/wp-content/uploads/chatgpt-logo-white-green-background-png.png">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://www.sketchappsources.com/resources/source-image/windows-logo-alesiamjau.png" width="40px">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://i.ibb.co/zS0hBLd/Ba-l-ks-z-2.png">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://www.edigitalagency.com.au/wp-content/uploads/chatgpt-logo-white-green-background-png.png">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://www.sketchappsources.com/resources/source-image/windows-logo-alesiamjau.png" width="40px">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://i.ibb.co/zS0hBLd/Ba-l-ks-z-2.png">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://www.edigitalagency.com.au/wp-content/uploads/chatgpt-logo-white-green-background-png.png">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://www.sketchappsources.com/resources/source-image/windows-logo-alesiamjau.png" width="40px">
            </div>
            <div class="markalar">
                <img class="logomarka" src="https://i.ibb.co/zS0hBLd/Ba-l-ks-z-2.png">
            </div>
        </div>
    </div>

.kategori{
  position: relative;
  margin: auto;
  margin-left: 2%;
  margin-right: 2%;
}
.kategoriler{
  margin-top: 125px;
  width: 64%;
  padding-left: 18%;
  padding-right: 18%;
}

.markalar{
  float: left;
  border-radius: 50%;
  width: 85px;
  height: 85px;
  margin-left: 10px;
  margin-right: 10px;
  box-shadow: 0px 0px 12px gray;
}
.logomarka{
  width: 85px;
  height: 85px;
  object-fit: cover;
  border-radius: 50%;
  }

bunu css ile değilde js ile yaptırmalısın. çünkü butona basıldığında başka resimler ve linkler gelecek.

Hocam aşağıdaki kodlar ile deneyebilir misiniz

<div class="slider">
  <div class="slideshow">
    <a href="link1.html"><img src="logo1.jpg" alt="Logo 1" class="logomarka"></a>
    <a href="link2.html"><img src="logo2.jpg" alt="Logo 2" class="logomarka"></a>
    <a href="link3.html"><img src="logo3.jpg" alt="Logo 3" class="logomarka"></a>
    <a href="link4.html"><img src="logo4.jpg" alt="Logo 4" class="logomarka"></a>
    <a href="link5.html"><img src="logo5.jpg" alt="Logo 5" class="logomarka"></a>
    <a href="link6.html"><img src="logo6.jpg" alt="Logo 6" class="logomarka"></a>
    <a href="link7.html"><img src="logo7.jpg" alt="Logo 7" class="logomarka"></a>
    <a href="link8.html"><img src="logo8.jpg" alt="Logo 8" class="logomarka"></a>
    <a href="link9.html"><img src="logo9.jpg" alt="Logo 9" class="logomarka"></a>
    <a href="link10.html"><img src="logo10.jpg" alt="Logo 10" class="logomarka"></a>
    <a href="link11.html"><img src="logo11.jpg" alt="Logo 11" class="logomarka"></a>
    <a href="link12.html"><img src="logo12.jpg" alt="Logo 12" class="logomarka"></a>
    <a href="link13.html"><img src="logo13.jpg" alt="Logo 13" class="logomarka"></a>
    <a href="link14.html"><img src="logo14.jpg" alt="Logo 14" class="logomarka"></a>
    <a href="link15.html"><img src="logo15.jpg" alt="Logo 15" class="logomarka"></a>
  </div>
</div>

.slider {
  width: 100%;
  overflow: hidden;
}

.slideshow {
  display: flex;
  width: 200%;
  animation: slide 30s infinite;
}

.logomarka {
  width: 85px;
  height: 85px;
  object-fit: cover;
  border-radius: 50%;
  margin: 10px;
  box-shadow: 0px 0px 12px gray;
}

.logomarka:hover {
  transform: scale(1.1);
}

.logomarka a {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  16.666% {
    transform: translateX(-100%);
  }
  33.333% {
    transform: translateX(-200%);
  }
  50% {
    transform: translateX(-300%);
  }
  66.666% {
    transform: translateX(-400%);
  }
  83.333% {
    transform: translateX(-500%);
  }
  100% {
    transform: translateX(-600%);
  }
}

Hocam denedim ama sayfayı açtığım an hepsi sağdan sola kaydı ve kayboldu

ne diye aratabilirim hocam pek js bilgim yok

js button click fonksiyonuyla yaptırabilirsin. nasıl yapıldığını bilmiyorum ama olması gereken bu. sen bir slider yapıyorsun bunu sadece css ile yapman imkansız. html slide template diye aratarak yapılmışlara bakabilirsin.

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slideshow {
  display: flex;
  width: 100%;
  animation: slide 15s infinite;
}

.logomarka {
  width: 85px;
  height: 85px;
  object-fit: cover;
  border-radius: 50%;
  margin: 10px;
  box-shadow: 0px 0px 12px gray;
}

.logomarka:hover {
  transform: scale(1.1);
}

.logomarka a {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  12.5% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-100%);
  }
  37.5% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  62.5% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  87.5% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}