1

I'm currently trying to make my image slideshow repeating so that it jumps back to the beginning or repeat with the first image when the slideshow is over. Somehow it's not working and I don't get it.

This is my demo:

#logo-gallery-wrapper {
  overflow: hidden;
  position: relative;
}

#logo-gallery {
  animation: scroll-left 220s linear infinite;
  animation-iteration-count: infinite;
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
  display: flex;
}

#logo-gallery .logo-gallery-figure {
  margin: 0;
  padding: 0 1.6rem;
  overflow: hidden;
}

#logo-gallery .logo-gallery-figure img {
  height: auto;
  max-height: 50px;
  position: relative;
  filter: grayscale(1);
  transition: all .4s;
}

#logo-gallery .logo-gallery-figure img:hover {
  filter: grayscale(0);
}

@keyframes scroll-left {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(calc(-1000rem + 100vw))
  }
}
<div id="logo-gallery-wrapper">
  <ul id="logo-gallery">
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
  </ul>
</div>
Mr. Jo
  • 4,946
  • 6
  • 41
  • 100
  • The ```calc()``` function does not appear to support modulus operations which would have been my suggestion. There's an answer with minimal JS [here](https://stackoverflow.com/a/34435452/14956277). – D M Jan 08 '21 at 17:28
  • You sure you don't want to use any JS here? Without it you're going to be duplicating your elements and making a hacky keyframe animation swap them at end / start. – Chris W. Jan 08 '21 at 17:28
  • It seems like it is working... It is just you gave the animation a 220s to execute so need to wait that long before it starts again. Plus, there is a possibility that the calculation is not so accurate. (you can change animation to `animation: scroll-left 2s linear infinite;` to see that it is working) – SomoKRoceS Jan 08 '21 at 17:35
  • @SomoKRoceS Hm I understand. But in this case my customer would not be very happy because of the reading speed. – Mr. Jo Jan 08 '21 at 18:02
  • In that case, the speed is okay. You should maybe just calculate the translation differently, because it disappears way before the 220s are over. – SomoKRoceS Jan 08 '21 at 18:06
  • Posted an answer that will help you. – SomoKRoceS Jan 08 '21 at 18:08
  • Your animation is working, you just have to wait 3minutes for it to repeat which is a bit long, and you don't need lots of figures if it's all to be the same image. What are you wanting to do eventually - will it be the same image going across or several images? You can do it with CSS but it takes a bit of calculation and it matters whether it's different or the same images. – A Haworth Jan 08 '21 at 18:12

2 Answers2

1

It seems like it is working. It is just you gave the animation a 220s to execute so need to wait that long before it starts again.

You should fix the calculation of the translation, because it disappears way before the 220s are over.

Your final keyframe should be the current element width, which you can retrieve after rendering and requires javascript. you can try -100vw but it won't be accurate as well.

Plus, I reduced the speed to 20s but you can speed it down if you want. Everything else is alright. infinite will do what you desire.

Run this snippet:

#logo-gallery-wrapper {
  overflow: hidden;
  position: relative;
}

#logo-gallery {
  animation: scroll-left 20s linear infinite;
  animation-iteration-count: infinite;
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
  display: flex;
}

#logo-gallery .logo-gallery-figure {
  margin: 0;
  padding: 0 1.6rem;
  overflow: hidden;
}

#logo-gallery .logo-gallery-figure img {
  height: auto;
  max-height: 50px;
  position: relative;
  filter: grayscale(1);
  transition: all .4s;
}

#logo-gallery .logo-gallery-figure img:hover {
  filter: grayscale(0);
}

@keyframes scroll-left {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-100vw)
  }
}
<div id="logo-gallery-wrapper">
  <ul id="logo-gallery">
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
  </ul>
</div>

Edit after your commnet: Using Javascript

I commented everything inside the snippet so it will be clear. But basically, I created the keyframes inside using the width after it was calculated.

document.getElementsByTagName("body")[0].onload = createAnimation;

  function createAnimation(){

  let e = document.getElementById("logo-gallery"); // Get the element

  var style = document.createElement('style'); // Create styling element
  style.type = 'text/css'; // Append a css type

  // Now create the dynamic keyFrames (that are depend on logo-gallery final width)
  // Notice that the width of e is given to translateX at 100%
  let keyframes = '\
  @keyframes scroll-left {\
      0% {\
          transform: translateX(0);\
      }\
      100% {\
          transform: translateX(-'+e.scrollWidth+'px);\
      }\
  }';
  style.innerHTML = keyframes; // Set innerHTML of the styling element to the keyframe
  document.getElementsByTagName('head')[0].appendChild(style); // append the element to the head of the document as a stylesheet
  e.setAttribute("style","animation: scroll-left 20s linear infinite; animation-iteration-count: infinite;"); // Give the element its animation properties.

}
#logo-gallery-wrapper {
  overflow: hidden;
  position: relative;
}

#logo-gallery {
  margin: 0;
  padding: 0;
  position: relative;
  list-style-type: none;
  display: flex;
}

#logo-gallery .logo-gallery-figure {
  margin: 0;
  padding: 0 1.6rem;
  overflow: hidden;
}

#logo-gallery .logo-gallery-figure img {
  height: auto;
  max-height: 50px;
  position: relative;
  filter: grayscale(1);
  transition: all .4s;
}

#logo-gallery .logo-gallery-figure img:hover {
  filter: grayscale(0);
}
<div id="logo-gallery-wrapper">
  <ul id="logo-gallery">
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
    <li>
      <figure class="logo-gallery-figure">
        <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
      </figure>
    </li>
  </ul>
</div>
SomoKRoceS
  • 2,934
  • 2
  • 19
  • 30
  • Thanks for the help! It's working but as you said its not 100 % perfect. What would be the correct way to directly start the animation again when its over? – Mr. Jo Jan 08 '21 at 21:50
  • 1
    @Mr.Jo You're welcome. I've edited my answer with an option using JavaScript that achieves exactly what you want. – SomoKRoceS Jan 08 '21 at 23:24
  • 1
    Thanks for your help and your afford. I really appreciate this! – Mr. Jo Jan 09 '21 at 10:15
0

its because images are scrolling towards left infinitely and at the time the loop is out of images it has nothing to show it just shows blank.So to solve this problem I increased the number of images and did some changes in css file now ur code is like this:

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo-gallery-wrapper {
    width: 75%;
    height: 5rem;
    overflow: hidden;
    position: relative;
    border: 1px solid red;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  
  #logo-gallery {
    animation: scroll-left 2s infinite linear;
    /* animation-iteration-count: infinite; */
    margin: 0;
    padding: 0;
    position: relative;
    list-style-type: none;
    display: flex;
  }
  
  #logo-gallery .logo-gallery-figure {
    margin: 0;
    padding: 0 1.6rem;
    overflow: hidden;
  }
  
  #logo-gallery .logo-gallery-figure img {
    height: auto;
    max-height: 50px;
    position: relative;
    filter: grayscale(1);
    transition: all .4s;
  }
  
  #logo-gallery .logo-gallery-figure img:hover {
    filter: grayscale(0);
  }
  
  @keyframes scroll-left {
    /* 0% {
      transform: translateX(0)
    } */
    100% {
      /* transform: translateX(calc(-1000rem + 100vw)) */
      transform: translateX(-100vw)
    }
  }
<div id="logo-gallery-wrapper">
        <ul id="logo-gallery">
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
          <li>
            <figure class="logo-gallery-figure">
              <img src="https://www.ikea.com/de/de/static/ikea-logo.f88b07ceb5a8c356b7a0fdcc9a563d63.svg">
            </figure>
          </li>
        </ul>
      </div>
Aneeq Ak
  • 61
  • 9