Question 268857 in Html Question posted in
Some basic documentation can be found here.

Html – Horizontal Infinite Scroll for images

I have this code for images that are display for infinite slide and this works fine but as soon as I add overflow-x: scroll to logos div it is not infinite anymore and I can’t scroll both ways.

–>What I want to achieve is the pictures slide automatically but at the same time I can scroll back and forth by myself and that doesn’t affect the automatic sliding.

HTML

<div class="logos-slide">
      <img src="./logos/Boss.png" />
      <img src="./logos/1.png" />
      <img src="./logos/2.png" />
      <img src="./logos/3.png" />
      <img src="./logos/4.png" />
      <img src="./logos/5.png" />
      <img src="./logos/6.png" />
      <img src="./logos/7.png" />
      <img src="./logos/8.png" />
    </div>
  </div>

  <script>
    var copy = document.querySelector(".logos-slide").cloneNode(true);
    document.querySelector(".logos").appendChild(copy);
  </script>

CSS

.logos::-webkit-scrollbar {
  display: none;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: scroll;
  overflow-x: scroll;
  padding: 60px 0;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:click .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 5s slide infinite linear;
}

.logos-slide img {
  height: 100px;
  margin: 0 2.5px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found out the solution to my question and here it is if someone needs it Basically what happens you have 3 rows of images row 1, 3 and 5 slide from left to right and the rest is the opposite and you can manually slide through them.

    HTML

      <div class="wrapper">
    
    <div class="text1">
      <img src="./assets/text1.png" alt="">
    </div>

    <div class="logos-container">

      <div class="logos">
        <div class="logos-slide">
          <img src="./logos/Boss.png" />
          <img src="./logos/1.png" />
          <img src="./logos/2.png" />
          <img src="./logos/3.png" />
          <img src="./logos/4.png" />
          <img src="./logos/5.png" />
          <img src="./logos/6.png" />
          <img src="./logos/7.png" />
          <img src="./logos/8.png" />
        </div>
      </div>

      <div class="logos rtl">
        <div class="logos-slide">
          <img src="./logos/Boss.png" />
          <img src="./logos/1.png" />
          <img src="./logos/2.png" />
          <img src="./logos/3.png" />
          <img src="./logos/4.png" />
          <img src="./logos/5.png" />
          <img src="./logos/6.png" />
          <img src="./logos/7.png" />
          <img src="./logos/8.png" />
        </div>
      </div>

      <div class="logos">
        <div class="logos-slide">
          <img src="./logos/Boss.png" />
          <img src="./logos/1.png" />
          <img src="./logos/2.png" />
          <img src="./logos/3.png" />
          <img src="./logos/4.png" />
          <img src="./logos/5.png" />
          <img src="./logos/6.png" />
          <img src="./logos/7.png" />
          <img src="./logos/8.png" />
        </div>
      </div>

      <div class="logos rtl">
        <div class="logos-slide">
          <img src="./logos/Boss.png" />
          <img src="./logos/1.png" />
          <img src="./logos/2.png" />
          <img src="./logos/3.png" />
          <img src="./logos/4.png" />
          <img src="./logos/5.png" />
          <img src="./logos/6.png" />
          <img src="./logos/7.png" />
          <img src="./logos/8.png" />
        </div>
      </div>

      <div class="logos">
        <div class="logos-slide">
          <img src="./logos/Boss.png" />
          <img src="./logos/1.png" />
          <img src="./logos/2.png" />
          <img src="./logos/3.png" />
          <img src="./logos/4.png" />
          <img src="./logos/5.png" />
          <img src="./logos/6.png" />
          <img src="./logos/7.png" />
          <img src="./logos/8.png" />
        </div>
      </div>
    </div>

    <script>
      var logosContainers = document.querySelectorAll(".logos");

      logosContainers.forEach(function (container) {
        var copy = container.querySelector(".logos-slide").cloneNode(true);
        container.appendChild(copy);
      });
    </script>

    CSS

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: url('./assets/background.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.text1 {
  width: 100px;
  height: 100px;
  padding: 0px 10px 10px 10px;
  z-index: 0;
}
.text1 img {
  height: 100px;
  z-index: 0;
 }

 .wrapper {
  position: static;
  width: 100%;
  overflow: hidden;
  height: 100vh;
  padding-top: -70px;
} 

.logos::-webkit-scrollbar {
  display: none;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-rtl {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.logos-container {
  transform: rotate(-15deg) translateX(-50px);
  width: calc(100% + 200px);
}
.logos {
  width: 100%;
  overflow:visible;
  overflow-x: scroll;
  white-space: nowrap;
  position: relative;

}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos-slide {
  display: inline-flex;
  animation: 30s slide infinite linear;
}

.rtl .logos-slide {
  animation: 30s slide-rtl infinite linear;
}

.logos-slide img {
  height: 100px;
  margin: 0 2.5px;
  filter: drop-shadow(-2px 4px 2px rgb(0, 0, 0));
  
}

  2. 0

    You can change display to flex and add hover state to the animated element:

    @keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-250%);
  }
}

.logos {
  overflow-x: scroll;
  padding: 60px 0;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos-slide:hover {
  animation-play-state: paused;
}

.logos-slide {
  display: flex;
  animation: 15s slide infinite linear;
}

.logos-slide img {
  flex:0 0 800px;
  height: 100px;
  width:800px;
  margin: 0 2.5px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
}
    <div class="logos-slide">
      <img src="./logos/1.png" alt="1" />
      <img src="./logos/2.png" alt="2" />
      <img src="./logos/3.png" alt="3" />
      <img src="./logos/4.png" alt="4" />
      <img src="./logos/5.png" alt="5" />
      <img src="./logos/6.png" alt="6" />
      <img src="./logos/7.png" alt="7" />
      <img src="./logos/8.png" alt="8" />
    </div>
  </div>

  <script>
    var copy = document.querySelector(".logos-slide").cloneNode(true);
    document.querySelector(".logos").appendChild(copy);
  </script>

    Note: If you want to be able scroll all elements, set animation: none in hover state. However, this will reset element positions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search