Unlimited icon carousel crafted with CSS

Question

Unlimited icon carousel crafted with CSS

Currently, I have a set of 10 icons that are scrolling horizontally from right to left. However, I am encountering an issue where at the end of the icon loop, there is a space causing the icons to jump back to the beginning.

I am looking for a solution to remove this space at the end of the loop so that the slide can seamlessly continue from the first icon without any jumping. Essentially, I need to create a smooth and infinite loop effect.

Can someone assist me in resolving this problem?

.logo{width: 100%;}
.logo_slider {
  overflow: hidden;
width: 752px;
margin: auto;
}

.logo_slider {
  overflow: hidden;
}

.logo_slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  position: relative;
  animation: mymove 10s linear infinite;
}

.logo_slider ul li {
  flex-shrink: 0;
  flex-grow: 0;
  display: block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.logo_slider ul li a img {
  width: 100%;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  0%    { left: 0; }
  100%  { left: -100%; }
}

/* Standard syntax */

@keyframes mymove {
  0%    { left: 0; }
  100%  { left: -100%; }
}

<div class="logo">
<div class="logo_slider">
<ul>
<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
<li><a href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png"></a></li>
...
...
</ul>
</div>
</div>

html css infinite-scroll

Answer 1

Answer №1

Check out this Codepen demo

The concept here involves sliding the slider by a distance of 120px, which is equivalent to the width of one icon (each list-item measures 80px in width along with a 40px margin). Since all icons are identical, the transition appears seamless.

To optimize performance, the movement utilizes the transform property instead of left.

It's important to ensure that there are enough images to cover all viewport sizes (plus an additional one).

CSS Styles:

.logo_slider {
  overflow: hidden;
  width: 752px;
  margin: auto;
}

.logo_slider {
  overflow: hidden;
}

.logo_slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  animation: mymove 1s linear infinite;
}

.logo_slider ul li {
  flex-shrink: 0;
  display: block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-sizing: border-box;
}

.logo_slider img {
  width: 100%;
}

@keyframes mymove {
  0%    { transform: 0; }
  100%  { transform: translateX(-120px); }
}

I would recommend using a single image for the icon and repeating it as a background (with the gray border part of the icon itself) rather than multiple images.

Here's an example employing a background:

View the Codepen demonstration here

In this method, the illusion of movement is achieved by setting the inner element's width (a pseudoelement :before containing the background) to the parent container's width plus 120px (using the calc() function).

The HTML markup is simple:

<div class="optimizedslider"></div>

And the corresponding CSS styling:

.optimizedslider {
  overflow: hidden;
  width: 750px;
  height: 100px;
  margin: auto;
}

.optimizedslider:before {
  content: "";
  display: block;
  background: url(https://url.to/icon.png) repeat-x;
  background-size: 120px 100px;
  height: 100%;
  width: calc(100% + 120px);
  animation: mymove 1s linear infinite;
}


@keyframes mymove {
  0%    { transform: 0; }
  100%  { transform: translateX(-120px); }
}

If needed, here is the icon (240x200) used:

https://i.sstatic.net/WjcSG.png

Answer 2

Check out this Codepen demo

The concept here involves sliding the slider by a distance of 120px, which is equivalent to the width of one icon (each list-item measures 80px in width along with a 40px margin). Since all icons are identical, the transition appears seamless.

To optimize performance, the movement utilizes the transform property instead of left.

It's important to ensure that there are enough images to cover all viewport sizes (plus an additional one).

CSS Styles:

.logo_slider {
  overflow: hidden;
  width: 752px;
  margin: auto;
}

.logo_slider {
  overflow: hidden;
}

.logo_slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  animation: mymove 1s linear infinite;
}

.logo_slider ul li {
  flex-shrink: 0;
  display: block;
  border: 1px solid #ccc;
  margin: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-sizing: border-box;
}

.logo_slider img {
  width: 100%;
}

@keyframes mymove {
  0%    { transform: 0; }
  100%  { transform: translateX(-120px); }
}

I would recommend using a single image for the icon and repeating it as a background (with the gray border part of the icon itself) rather than multiple images.

Here's an example employing a background:

View the Codepen demonstration here

In this method, the illusion of movement is achieved by setting the inner element's width (a pseudoelement :before containing the background) to the parent container's width plus 120px (using the calc() function).

The HTML markup is simple:

<div class="optimizedslider"></div>

And the corresponding CSS styling:

.optimizedslider {
  overflow: hidden;
  width: 750px;
  height: 100px;
  margin: auto;
}

.optimizedslider:before {
  content: "";
  display: block;
  background: url(https://url.to/icon.png) repeat-x;
  background-size: 120px 100px;
  height: 100%;
  width: calc(100% + 120px);
  animation: mymove 1s linear infinite;
}


@keyframes mymove {
  0%    { transform: 0; }
  100%  { transform: translateX(-120px); }
}

If needed, here is the icon (240x200) used:

https://i.sstatic.net/WjcSG.png

Answer 3

Answer №2

Every time an icon moves off the screen, we simply remove it since nobody can see it anyway. Simultaneously, a new icon is generated on the other side of the screen to continue moving across the canvas. Update your animation called "mymove" with this code snippet:

@keyframes mymove {
  0%    { translate: 0; }
  100%  { transform: translateX(-120px) } 
}

The value of 120 px aligns closely with the width of one icon in your example. To create the desired illusion, make sure to have one additional icon beyond what you intend to display. For instance, if you want to show 6 icons, keep 7 so that the last one contributes to the visual effect.

Answer 4

Every time an icon moves off the screen, we simply remove it since nobody can see it anyway. Simultaneously, a new icon is generated on the other side of the screen to continue moving across the canvas. Update your animation called "mymove" with this code snippet:

@keyframes mymove {
  0%    { translate: 0; }
  100%  { transform: translateX(-120px) } 
}

The value of 120 px aligns closely with the width of one icon in your example. To create the desired illusion, make sure to have one additional icon beyond what you intend to display. For instance, if you want to show 6 icons, keep 7 so that the last one contributes to the visual effect.

Unlimited icon carousel crafted with CSS

Answer №1

Answer №2

Similar questions

The image link leading to the homepage lacks the functionality to be clicked on

Unable to bring JavaScript into an HTML document

hover causing the table cell to act erratically

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

Conceal table columns on an HTML page using CSS styling

Is it possible to scale images dynamically using CSS without losing their proper proportions?

Is it possible to create a webpage that is invisible to users accessing it from a desktop device

Issue with Audio TAG functionality in Internet Explorer 9

Angular - Customizing button bindings for various functions

How can I position a CSS Grid grandchild outside the boundaries of its parent using Tailwind CSS?

Tips for adding a space before the footer in a document

Issue with Bootstrap 5 Card Header not extending to full width

Exploring ngModel components with a specified class

CSS exhibiting variations on similar pages

Chrome stack router outlet and the utilization of the Angular back button

What is the best way to access the iframe element?

Error in RatingBar component: Vue.js 3 and Tailwind CSS not displaying dynamic width correctly

Is there a way to automatically play videos without any audio?

Create a background for a dropdown list that appears unreachable, positioned above all other elements

Adjust the position of the xAxis on the Highcharts chart to move it downward or