Optimize CSS unlimited picture carousel: say goodbye to the gaps and achieve smooth and responsive scrolling

This article discusses in detail the common gaps and display exceptions when creating unlimited image carousels using HTML and CSS. By analyzing the limitations of fixed width and layout patterns, a solution based on responsive design and precise CSS animation is provided. The tutorial will guide you to optimize CSS properties, such as using inline-flex layouts and dynamically compute element widths, and correctly configure @keyframes animations to ultimately achieve a smooth, seamless and multi-device compatible unlimited image scrolling effect.

Understand the principle of infinite scrolling carousel

Infinite picture carousels usually achieve seamless loops by copying a set of picture elements and panning the entire container by half its width in CSS animation. When the first set of pictures is completely moved out of the viewport, the second set of pictures is just in, while the animation quietly resets the container to its initial position, creating an infinite scrolling visual. The core of this approach is to ensure that the image elements can completely cover the width of the parent container so that there is no whitespace during transitions.

Problem analysis: Why do gaps and display abnormalities appear?

The problems of gaps and incomplete picture display in the original implementation mainly stem from the following aspects:

1. Fixed width and insufficient coverage : The .banner and .profile elements use fixed pixel widths. At different viewport sizes, these fixed widths may cause the image elements to not fully cover the width of the .container, especially when the animation goes to the switch point, the blank area will be exposed. The infinite scrolling mechanism requires that the total width of the element is at least twice the viewport, and the width of each child element needs to work together to fill the parent container.
2. Potential effects of display: flex : Although display: flex is very useful in many layouts, when combined with white-space: nowrap and position: absolute, it may conflict with the principle of infinite scrolling, or in some cases introduce unexpected layout behavior.
3. Animation keyframe definition is missing or inaccurate : The translation effect of the animation depends on the @keyframes rule. If the rule is not correctly defined, or the percentage of translation is inaccurate (for example, without an exact translation from 0% to -50%), infinite loops cannot be achieved.

Solution: Build a smooth and responsive infinite carousel

To solve the above problems and achieve a smooth, responsive, unlimited image carousel, we need to fine-tune the HTML structure and critically optimize the CSS.

HTML Structure

HTML structure maintains the strategy of double image elements, which is the cornerstone of achieving seamless and infinite scrolling. For demonstration, we use the placeholder image provided by picsum.photos.

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Unlimited Picture Carousel</title>
  <link rel="stylesheet" href="style.css">


  <div class="container">
    <div class="banner">
      <!-- The first group of pictures-->
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1015/200/300" class="lazy" alt="Picture 1">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1016/200/300" class="lazy" alt="Picture 2">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1015/200/300" class="lazy" alt="Picture 3">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1016/200/300" class="lazy" alt="Picture 4">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1015/200/300" class="lazy" alt="Picture 5">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1016/200/300" class="lazy" alt="Picture 6">
      </div>
      <!-- The second set of pictures (repeat of the first set, for seamless loop) -->
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1015/200/300" class="lazy" alt="Picture 7">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1016/200/300" class="lazy" alt="Picture 8">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1015/200/300" class="lazy" alt="Picture 9">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1016/200/300" class="lazy" alt="Picture 10">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1015/200/300" class="lazy" alt="Picture 11">
      </div>
      <div class="profile">
        <img src="/static/imghw/default1.png" data-src="https://picsum.photos/id/1016/200/300" class="lazy" alt="Picture 12">
      </div>
    </div>
  </div>

CSS Key Adjustments

Here are the key CSS tweaks to implement responsive unlimited carousels:

 /* Global reset to ensure consistency*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Container style*/
.container {
  height: 250px; /* Define container height*/
  width: 90%; /* Container width accounts for 90% of the parent element */
  position: relative; /* relative positioning, providing positioning context for child elements*/
  overflow: hidden; /* Hide content beyond the container*/
  margin: 0 auto; /* Container is centered horizontally*/
  /* The original display: grid; place-items: center; was removed because the banner will use absolute positioning and inline-flex */
}

/* Carousel bar style*/
.banner {
  position: absolute; /* Absolute positioning, away from document flow*/
  white-space: nowrap; /* Prevent child elements from wrapping, make sure they are all on one line*/
  /* Original display: flex; and fixed width width: calc(250px*12); removed*/
  animation: scroll 40s linear infinite; /* Apply scroll animation*/
  font-size: 0; /* Eliminate the default spacing that may occur between inline-flex elements*/
}

/* Define scrolling animation*/
@keyframes scroll {
  0% {
    transform: translateX(0); /* When the animation starts, it does not translate*/
  }
  100% {
    transform: translateX(-50%); /* When the animation ends, translate half of its width to the left*/
  }
}

/* Single picture item style*/
.profile {
  height: 500px; /* The image item height, note that it is higher than the container, overflow: hidden will crop */
  /* Original fixed width width: 150px; removed*/
  width: calc(100vw / 5); /* Responsive width: Each image item occupies 1/5 of the viewport width */
  display: inline-flex; /* Use inline-flex to display elements in a row and maintain flexbox features*/
  align-items: center; /* vertical centering picture*/
  padding: 15px; /* Inner margin*/
  perspective: 100px; /* 3D perspective effect, removable if not required*/
  font-size: initial; /* Restore the font size of the internal element to prevent font-size: 0 from affecting*/
}

/* Picture style*/
.profile img {
  width: 100%; /* Image width fills the parent element (profile) */
  height: auto; /* Keep the picture proportion*/
}

Things to note

1. Precision of width calculation : width: calc(100vw / 5) Assume that you want to display 5 full pictures at any time. If you need to display a different number of pictures, or if you have a fixed picture width requirement, you need to adjust this calculated value accordingly. For example, if you want to display 4 pictures, change to calc(100vw/4).
2. font-size: 0 and font-size: initial : Setting font-size: 0 on the .banner is to eliminate the default spacing caused by spaces or carriage return between inline-flex or inline-block elements. Then setting font-size: initial in the .profile can ensure that if there is text content inside the .profile, its font size can be displayed normally without being affected by the parent font-size: 0.
3. Vertical height management : In the example, the height of the .profile (500px) is greater than the height of the .container (250px), and the .container sets overflow: hidden. This means that the image content will be cropped. Depending on the actual design requirements, you may need to adjust the height of the .profile or the height of the .container, or adjust the size of the image itself to ensure that the image is fully displayed.
4. Image path : Make sure the image src path in HTML is correct. This tutorial uses placeholder images. Please replace them with your local or CDN images in actual projects.

The above is the detailed content of Optimize CSS unlimited picture carousel: say goodbye to the gaps and achieve smooth and responsive scrolling. For more information, please follow other related articles on the PHP Chinese website!