Your logos.
Your rules.

Copy. Paste. Customize.

1. Create a slider or wall in the editor. The same image list is shared; each mode keeps its own design.
2. Export All-in-one for HTML with CSS and JS included. Paste the complete snippet, including its template and script.
3. Upload the exported image files. Use relative paths on your own website and public image URLs for CodePen.
4. Add a custom class to the outer logo-flow element, then use the parts below for scoped styling.

<logo-flow class="my-logos" data-settings='{"mode":"slider","color":"hover","tiles":true,"radius":18,"size":48,"gap":24,"speed":40,"controlOnHover":true}'>
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">
    <img src="logos/brand.png" alt="Brand">
  </a>
</logo-flow>

This markup needs the runtime. Keep the CSS template and script from the editor export, or load both shared runtime files.

Try the details.

This example uses the same runtime as your export. The symbols are local demo graphics.

Corner radius

18 px

Layout SliderLogo wall

data-settings

A JSON object controls the component. Keys and enum values remain English in both languages. Use booleans and numbers, not their string equivalents.

Change settings after the page loads

const el = document.querySelector('.my-logos');
const settings = JSON.parse(el.dataset.settings || '{}');
settings.radius = 24;
settings.speed = 50;
el.dataset.settings = JSON.stringify(settings);

The runtime observes data-settings and the light-DOM image list. If you set el.config directly, it becomes the source of truth; update that property for later changes.

Classes inside. Parts outside.

LogoFlow renders inside a Shadow DOM. Page CSS such as .my-logos .item cannot reach those internal elements. Use ::part(...) from your page stylesheet, or edit the CSS template in an All-in-one export.

State and treatment classes

• .tiles: card backgrounds enabled.
• .grayscale, .hover, .original: logo color treatment.
• .controls-hover: pause button appears on hover or keyboard focus.
• .is-paused: manually paused.
• .still: reduced-motion layout.
• .duplicate: loop copies, hidden from screen readers and keyboard navigation, still clickable.

These classes are generated state. Set the matching data-settings values instead of adding internal classes to the outer element.

A few useful CSS recipes.

.my-logos::part(tile) {
  border: 1px solid #d8dfcf;
  box-shadow: 0 4px 16px #00000008;
}
.my-logos::part(control) {
  border-radius: 12px;
  background: #20211e;
  color: #ffffff;
}
.my-logos::part(logo) {
  opacity: .9;
}

Use the editor settings for radius, spacing, colors and columns. The runtime writes these variables on the surface element. To deliberately override a variable from outside, target the surface part with !important.

.my-logos::part(surface) {
  --lf-background: #f7f8f4 !important;
  --lf-card: #ffffff !important;
}

Common variables: --lf-background, --lf-card, --lf-ink, --lf-radius, --lf-size, --lf-gap and --lf-width. At narrow container widths, the runtime caps image size and spacing; mobile wall columns are independent of viewport width.

Files, links and fonts.

Image sources are separate files, never Base64 in the generated image markup. The ZIP preserves selected crops and original filenames; duplicate names receive a numbered suffix. A link wraps the whole tile, including padding.

No custom font in exports. The slider CSS defines no font family, loads no font file and includes no Font Awesome. Text inherits the destination page font. Font sizes and weights can still be used for the small controls. Font Awesome belongs only to the landing pages and editor.

After modifying logo-slider.js or logo-slider.css, run node build-embed.mjs to regenerate the All-in-one sources. After changing translations, run node build-pages.mjs. Before publishing, run node configure.mjs with your real public base URL.

When something looks off.