14

so I'm trying to create an infinite scroll animation on my website, but I've been really struggling. The original tutorial is here, and uses 6 images, with 4 repeating at the end to make the transition seamless.

https://designshack.net/articles/css/infinitephotobanner/

The problem is that when I add more images, the animation doesn't work. I know that's because I need to increase the width and other variables. In the original, it looks like since she has 10 images (6 original and 4 repeats) that are each 350px, and the photobanner is 3550px, the formula should be 10 times the image width plus 50px for the margin. So I tried doing that to start.

I've been adjusting how much the banner moves relentlessly, but the tutorial doesn't explain how I need to calculate the distance that the banner needs to move without it looping. Looking online there are tons of people with the same problem, and I haven't found any clear answers except copying and pasting someone's code. Is there a better guide that I could be using, or could anyone let me know what variables I need to be adjusting?

Also if I change the container width from 1000px to something larger, will I have to adjust the other numbers as well? If so, how do I calculate that? Surely there must be a better way than rewatching the loop 1000 times, and slightly changing the number each time until the pixels line up perfectly? If so that's going to take me an extremely long time since my loop is so long.

If it helps, each image is 800px by 308px. Here is the HTML. Any help or even a source to learn how to figure it out myself would be really appreciated.

<div id="container">

<div class="photobanner">

<img class="first" src="img1.png" alt="" />

<img src="img2.png" alt="" />

<img src="img3.png" alt="" />

<img src="img4.png" alt="" />

<img src="img5.png" alt="" />

<img src="img6.png" alt="" />

<img src="img7.png" alt="" />

<img src="img8.png" alt="" />

<img src="img9.png" alt="" />

<img src="img10.png" alt="" />

<img src="img11.png" alt="" />

<img src="img12.png" alt="" />

<img src="img13.png" alt="" />

<img src="img14.png" alt="" />

<img src="img1.png" alt="" />

<img src="img2.png" alt="" />

<img src="img3.png" alt="" />

<img src="img4.png" alt="" />

</div>

</div>

And here is the CSS


* {margin: 0; padding: 0;}

body {

<!-- src: http://subtlepatterns.com/?p=1045 -->

background: url('dark_geometric.png');

}

#container {

width: 1000px;

overflow: hidden;

margin: 50px auto;

background: white;

}



/*header*/

header {

width: 800px;

margin: 40px auto;

}

header h1 {

text-align: center;

font: 100 60px/1.5 Helvetica, Verdana, sans-serif;

}

header p {

font: 100 15px/1.5 Helvetica, Verdana, sans-serif;

text-align: justify;

}

/*photobanner*/

.photobanner {

height: 233px;

width: 14450px;

margin-bottom: 80px;

}



/*keyframe animations*/

.first {

-webkit-animation: bannermove 30s linear infinite;

-moz-animation: bannermove 30s linear infinite;

-ms-animation: bannermove 30s linear infinite;

-o-animation: bannermove 30s linear infinite;

animation: bannermove 30s linear infinite;

}

u/keyframes "bannermove" {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}

u/-moz-keyframes bannermove {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}

u/-webkit-keyframes "bannermove" {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}

u/-ms-keyframes "bannermove" {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}

u/-o-keyframes "bannermove" {

0% {

margin-left: 0px;

}

100% {

margin-left: -12000px;

}

}
1
  • the better way is to use an owl-carousel.. then you could achieve this easily Jan 30, 2020 at 6:43

3 Answers 3

26

This solution works without javascript code.

photobanner has absolute position so, it is outside the normal flow and setting white-space to nowrap creates an horizontal container with all the images inside it.

To create the infinite loop I inserted 4 images twice and animation move photobanner container from 0 to -50% of the dimension.

Due to the absolute position, it is necessary to set the height of the #container.

If you can't add images twice, you can play with the percentage based on how many images you add at the end, which must be enough to fill the visible space of the #container.

#container {
  height:350px; 
  position:relative; 
  overflow:hidden;
}

.photobanner {
  position:absolute; 
  top:0px; 
  left:0px; 
  overflow:hidden; 
  white-space: nowrap;
  animation: bannermove 10s linear infinite;
}

.photobanner img {    
  margin: 0 0.5em 
}

@keyframes bannermove {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-50%, 0);
  }
}
<div id="container">
  <div class="photobanner">
    <img src="https://i.stack.imgur.com/xckZy.jpg" alt=""><img src="https://i.stack.imgur.com/CVgbr.jpg" alt=""><img src="https://i.stack.imgur.com/7c4yC.jpg" alt=""><img src="https://i.stack.imgur.com/RTiml.jpg" alt=""
><img src="https://i.stack.imgur.com/xckZy.jpg" alt=""><img src="https://i.stack.imgur.com/CVgbr.jpg" alt=""><img src="https://i.stack.imgur.com/7c4yC.jpg" alt=""><img src="https://i.stack.imgur.com/RTiml.jpg" alt="">
  </div>
</div>

Adding these rules, on mouse over animation stops and image can be manually scrolled:

#container:hover {
   overflow: auto;
}

#container:hover .photobanner {
   animation-play-state:paused;
}
9
  • Why you used the same image multiple times? Oct 14, 2021 at 7:10
  • 1
    Because the animation shifts the images from 0 to 50% of the total size to the left, so the first 4 images disappear and the next 4 are shown. Completed the animation it quickly warps back to the original position and starts over.
    – Lety
    Oct 14, 2021 at 10:52
  • I got your point but I have one doubt. I have 10 images and I have to add some images again 2 times for loop? Oct 14, 2021 at 11:39
  • 1
    As I wrote in the answer, you can play with the percentage based on how many images you add at the end, which must be enough to fill the visible space of the #container. If there are 10 images and only 3 are visible at the beginning of the animation, you can add 3 images (the first three) and change the percentage to about 76.9%
    – Lety
    Oct 14, 2021 at 13:21
  • What a great solution! I just have a couple of questions about it, there's a flash that happens every time the images loop back to the first, they all disappear for a frame and load back in, could this be fixed? Also is it possible to make the carousel scrollable manually?
    – Johnson
    Jan 25 at 21:32
1

Hope this one will help you

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 0,
  nav: true,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  responsive: {
    0: {
      items: 3
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container-fluid">
  <div class="owl-carousel owl-theme">
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
    <div class="item">
      <img  style="width:100%; height: 200px;  " src="https://source.unsplash.com/random" alt="">
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

1

Here is my suggestion - CSS only, but using CSS variables.

With this you can put image or any content until block heights are the same. Also you can control space between images.

Important - you need to fill full screen width. It will not work when elements are shorter than available screen.

Also important - you need to put all visible elements after whole set. What I mean:

Let's say when we have 7 items in total, but we want only 3 to be visible at once (and no more than that), so after this 7 items we need to put copy of first 3 items from the list.

Sorry for my language, I hope you can understand me.

.scroller__wrapper {
  /* How long one slide is visible on screen (from entering screen to leaving it) */
  --scrolling-gallery-item-duration: 5s;
  /* How many items we want to see on screen at once */
  --scrolling-gallery-items-visible: 7;
  /* How many items are to scroll */
  --scrolling-gallery-items-total: 7;
  margin-top: 2.25em;
  overflow: hidden;
  will-change: transform;
}

.scroller {
  animation-duration: calc(var(--scrolling-gallery-item-duration, 1s) / var(--scrolling-gallery-items-visible) * var(--scrolling-gallery-items-total));
  animation-timing-function: linear;
  animation-name: scrolling-gallery;
  animation-iteration-count: infinite;
  display: flex;
  white-space: nowrap;
}

.scroller__container {
  /* Without this, scroll will jump on desktop if any vertical scrollbar is shown */
  width: 100vw;
}

.scroller__item {
  flex: 1 0 calc(100% / var(--scrolling-gallery-items-visible));
  /* Without this, block elements will take width from their contents and thus making wrong calculations,
     so this just force elements to take only exact part of the container (screen) and equal for all */
  width: 0px;
  /* If you want to have it continuous without any spaces, remove two lines below */
  box-sizing: border-box;
  padding: 0.5em;
}

.scroller img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

@keyframes scrolling-gallery {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--scrolling-gallery-items-total) * -100vw / var(--scrolling-gallery-items-visible)));
  }
}

.scroller:hover,
.scroller:focus {
  animation-play-state: paused;
}


/* Styles only for switching */

input[type=radio] {
  display: none;
}

label {
  align-items: center;
  background-color: rgba(0, 192, 0, 1);
  cursor: pointer;
  display: inline-flex;
  flex-flow: column;
  justify-content: center;
  margin-right: 0.5em;
  margin-top: 1em;
  min-width: 2em;
  padding: 0.5em;
}

input#items-1:checked~.scroller__wrapper {
  --scrolling-gallery-items-visible: 1;
}

input#items-2:checked~.scroller__wrapper {
  --scrolling-gallery-items-visible: 2;
}

input#items-3:checked~.scroller__wrapper {
  --scrolling-gallery-items-visible: 3;
}

input#items-4:checked~.scroller__wrapper {
  --scrolling-gallery-items-visible: 4;
}

input#items-5:checked~.scroller__wrapper {
  --scrolling-gallery-items-visible: 5;
}

input#items-6:checked~.scroller__wrapper {
  --scrolling-gallery-items-visible: 6;
}

input#items-7:checked~.scroller__wrapper {
  --scrolling-gallery-items-visible: 7;
}

input#dur-1s:checked~.scroller__wrapper {
  --scrolling-gallery-item-duration: 1s;
}

input#dur-2s:checked~.scroller__wrapper {
  --scrolling-gallery-item-duration: 2s;
}

input#dur-3s:checked~.scroller__wrapper {
  --scrolling-gallery-item-duration: 3s;
}

input#dur-5s:checked~.scroller__wrapper {
  --scrolling-gallery-item-duration: 5s;
}

input#dur-10s:checked~.scroller__wrapper {
  --scrolling-gallery-item-duration: 10s;
}
<!-- Buttons for changing items -->
<label for="items-1">1</label>
<label for="items-2">2</label>
<label for="items-3">3</label>
<label for="items-4">4</label>
<label for="items-5">5</label>
<label for="items-6">6</label>
<label for="items-7">7</label>
<br />
<label for="dur-1s">1s</label>
<label for="dur-2s">2s</label>
<label for="dur-3s">3s</label>
<label for="dur-5s">5s</label>
<label for="dur-10s">10s</label>

<input name="items" id="items-1" type="radio">
<input name="items" id="items-2" type="radio">
<input name="items" id="items-3" type="radio">
<input name="items" id="items-4" type="radio">
<input name="items" id="items-5" type="radio">
<input name="items" id="items-6" type="radio">
<input name="items" id="items-7" type="radio">

<input name="dur" id="dur-1s" type="radio">
<input name="dur" id="dur-2s" type="radio">
<input name="dur" id="dur-3s" type="radio">
<input name="dur" id="dur-5s" type="radio">
<input name="dur" id="dur-10s" type="radio">

<!-- Scroller -->
<section class="scroller__wrapper">
  <div class="scroller__container">
    <div class="scroller">
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <!-- Here are exact copy of previous items -->
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
      <div class="scroller__item"><img src="https://via.placeholder.com/350x700"></div>
    </div>
  </div>
</section>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.