Perpetual and Responsive Carousel, No JavaScript Required

Component: SBE Carousel Loop

This continuously scrolling carousel captures attention and makes the page more dynamic and engaging. It allows for presenting a lot of information in a limited space.

Using This Component

For other applications, copy the HTML and CSS source code below.

Component configuration in CSS code

Initial Setup

At the beginning of the CSS code, determine the default values for the variables:

--sbe-img-width: clamp(min, dynamic, max);
Dynamic definition of image width based on display.
--sbe-direction: Right to left forwards, reverse for opposite direction..
--sbe-duration: Animation speed.

The responsive image width uses CSS clamp() and calc() functions.
For the clamp() function, three parameters are required: Minimum width, dynamic width, maximum width.
The second parameter is used when its value is between the other parameters.

The responsive width uses the calc(fixed, proportional) function with 2 parameters that are added:

The fixed part uses an absolute value in pixels or rem.
The proportional part uses the vw (viewport width) unit, which corresponds to a percentage of the viewport width.
This value is what makes the image width responsive.
Decimal numbers can be used for this value.

Two Solutions for Defining Multiple Carousel Settings

Modify the CSS variables on line 4 of the HTML code with a style attribute.
Create a class for each additional required setting.
In each customization class, define the value of the variables to be modified.
The declaration must be preceded by the .carousel-loop class without using a space between the two classes.

Examples Created Using SiteBoostEdit CSS Theme Thumbnails

First Example

This example uses smaller dimensions determined by the .other-settings class.
Other variables are modified for the example. See the CSS code.

Second Example

This other example uses the same HTML code, except the .other-sizes class is not used.

Second Example

Component Code

<!-- Code HTML -->
<div class="bg-light">
  <!-- other-settings : Optional class used by the first example -->
  <div class="carousel-loop other-settings">
    <ul>
      <li><img alt="Blue-classic Light" src="/assets/img/lg/sbe-blue-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Blue-classic Dark" src="/assets/img/lg/sbe-blue-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Indigo-classic Light" src="/assets/img/lg/sbe-indigo-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Indigo-classic Dark" src="/assets/img/lg/sbe-indigo-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Purple-classic Light" src="/assets/img/lg/sbe-purple-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Purple-classic Dark" src="/assets/img/lg/sbe-purple-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Pink-classic Light" src="/assets/img/lg/sbe-pink-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Pink-classic Dark" src="/assets/img/lg/sbe-pink-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Red-classic Light" src="/assets/img/lg/sbe-red-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Red-classic Dark" src="/assets/img/lg/sbe-red-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Orange-classic Light" src="/assets/img/lg/sbe-orange-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Orange-classic Dark" src="/assets/img/lg/sbe-orange-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Yellow-classic Light" src="/assets/img/lg/sbe-yellow-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Yellow-classic Dark" src="/assets/img/lg/sbe-yellow-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Green-classic Light" src="/assets/img/lg/sbe-green-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Green-classic Dark" src="/assets/img/lg/sbe-green-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Turquoise-classic Light" src="/assets/img/lg/sbe-turquoise-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Turquoise-classic Dark" src="/assets/img/lg/sbe-turquoise-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Cyan-classic Light" src="/assets/img/lg/sbe-cyan-classic-lg-light.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
      <li><img alt="Cyan-classic Dark" src="/assets/img/lg/sbe-cyan-classic-lg-dark.png?h=06358af9dc53bea9617dfe7222fee2f8" width="433" height="328" /></li>
    </ul>
  </div>
</div>

/* Code CSS */
.carousel-loop {
  /* Start of parameters */
  --sbe-img-width: clamp(100px, calc(43px + 20vw), 433px);
  --sbe-direction: forwards; /* ou reverse; */
  --sbe-duration: 30s;
  /* End of parameters */

  overflow: hidden;
  --sbe-space: calc(3px + 1vw);
  margin: 0 max(.5rem, calc(var(--sbe-space) * 0.6));
  max-width: 100%;
}

.carousel-loop ul {
  display: flex;
  gap: min(var(--sbe-space), 1rem);
  margin: min(var(--sbe-space), 1rem);
  padding: 0;
  list-style: none;
  width: max-content;
  animation: carousel-loop-scroll var(--sbe-duration) var(--sbe-direction) linear infinite;
}

/* Stop the animation on hover */
.carousel-loop ul:hover {
  animation-play-state: paused;
}

.carousel-loop ul li {
  margin: 0;
}
.carousel-loop ul li img {
  width: var(--sbe-img-width);
  height: auto;
  border-radius: var(--bs-border-radius);
}
@keyframes carousel-loop-scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* Optional class used by the first example */
.carousel-loop.other-settings {
  --sbe-img-width: clamp(120px, calc(22px + 17vw), 260px);
  --sbe-duration: 40s;
  --sbe-direction: reverse;
}