naelike/img-row-slider-css

CSS + HTML ทำรูปภาพ หรือทำ Logo Slider ไม่ต้องใช้ JS หรือ Javascript

Img Row Slider CSS

CSS + HTML ทำรูปภาพ หรือทำ Logo Slider ไม่ต้องใช้ JS หรือ Javascript

HTML

<div class="row">
  <div class="col-12">
    <div class="slider">
      <div class="slide-track">
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/thumbs/2x/mcdonalds-black-logo.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/images/large/2x/starbucks-logo-black-and-white.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/general-electric-black-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/nfl-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/mercedes-benz-6-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/hogwarts-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/thumbs/2x/mcdonalds-black-logo.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/images/large/2x/starbucks-logo-black-and-white.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/general-electric-black-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/nfl-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/mercedes-benz-6-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/hogwarts-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/thumbs/2x/mcdonalds-black-logo.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/images/large/2x/starbucks-logo-black-and-white.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/general-electric-black-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/nfl-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/mercedes-benz-6-logo-png-transparent.png" alt="">
        </div>
        <div class="slide">
          <img src="https://cdn.freebiesupply.com/logos/large/2x/hogwarts-logo-png-transparent.png" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

Style

img {
  width: 100px;
  height: 100px;
  animation: scroll 60s linear infinite;
}
.slide-track {
  width: 100%;
  display: flex;
  gap: 3em;
  overflow: hidden;
}
.slider {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #fff;
  padding: 0em 0em;
}
  @keyframes scroll {
  0% {transform: translateX(0);}
  100% {transform: translatex(-1000%)}
}

Developer : NaeLike เนไลก์

Naelike เนไลก์

@เว็บไซต์ 👍 Web : https://naelike.com ..!
@ติดตาม 👍 Web : https://naelike.com/addmee ..!

TikTok : https://www.tiktok.com/@naelike6564
Facebook : https://web.facebook.com/NaeLikePage
Instagram : https://www.instagram.com/naelike_ig

Discord คลิก..!