Marketing · Gutenberg
Logo Carousel block for WordPress
Show client/partner logos in a responsive carousel or grid.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Show client/partner logos in a responsive carousel or grid.
Inspector panels on this block: Layout, Carousel, Logos, Selected Logo. Those titles come from index.js, not from a shared template.
Behavior controls: “Display” options: Carousel, Grid; “Peek amount” (CSS length, e.g. 20% or 120px); “Arrow style” options: Top Right, Bottom Center, Overlay Sides; “Indicators” options: None, Dots, Progress, Fraction.
Where to find it
Gutenberg inserter → Marketing → search “Logo Carousel” (block name `blockenberg/logo-carousel` in block.json). Style it in the sidebar after insert.
How to use Logo Carousel block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Logo Carousel”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Display”, “Columns”, “Layout — Gap”, “Visible logos”.
- Check the published page. The view script reads HTML data attributes: data-bkbg-autoplay, data-bkbg-autoplay-delay, data-bkbg-autoplay-hover, data-bkbg-autoscroll, data-bkbg-autoscroll-hover, data-bkbg-autoscroll-speed, data-bkbg-dot, data-bkbg-fraction. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Display | Select control; the chosen value is saved on the block. Options: Carousel; Grid. block.json default: carousel. Saved as `layoutStyle`. |
| Columns | Numeric range control in the inspector. Range 2–8. block.json default: 5. Saved as `columns`. |
| Layout — Gap | Numeric range control in the inspector. Range 0–64. block.json default: 24. Saved as `gap`. |
| Visible logos | Numeric range control in the inspector. Range 1–8. block.json default: 4. Saved as `carouselVisible`. |
| Peek next logos | On/off toggle in the inspector. On by default. Saved as `carouselPeek`. |
| Peek amount | Text field in the inspector. CSS length, e.g. 20% or 120px. block.json default: 20%. Saved as `carouselPeekAmount`. |
| Show arrows | On/off toggle in the inspector. On by default. Saved as `carouselNav`. |
| Arrow style | Select control; the chosen value is saved on the block. Options: Top Right; Bottom Center; Overlay Sides. block.json default: overlay. Saved as `carouselNavStyle`. |
| Indicators | Select control; the chosen value is saved on the block. Options: None; Dots; Progress; Fraction. block.json default: none. Saved as `carouselIndicators`. |
| Indicators position | Select control; the chosen value is saved on the block. Options: Below; Top. block.json default: below. Saved as `carouselIndicatorsPosition`. |
| Dots style | Select control; the chosen value is saved on the block. Options: Default; Active pill. block.json default: default. Saved as `carouselDotsStyle`. |
| Progress style | Select control; the chosen value is saved on the block. Options: Default; Edge to edge. block.json default: default. Saved as `carouselProgressStyle`. |
| Infinite Loop | On/off toggle in the inspector. On by default. Saved as `infiniteScroll`. |
| Auto-scroll (continuous) | On/off toggle in the inspector. Runs on the live site (frontend). Please check it there. Off by default. Saved as `autoScroll`. |
| Auto-scroll speed (px/sec) | Numeric range control in the inspector. Range 5–200. block.json default: 40. Saved as `autoScrollSpeed`. |
| Pause on hover | On/off toggle in the inspector. On by default. Saved as `autoScrollPauseOnHover`. |
| Autoplay | On/off toggle in the inspector. Off by default. Saved as `autoplay`. |
| Autoplay delay (ms) | Numeric range control in the inspector. Range 800–10000. block.json default: 3000. Saved as `autoplayDelay`. |
| Pause on hover (Autoplay Pause On Hover) | On/off toggle in the inspector. On by default. Saved as `autoplayPauseOnHover`. |
| Max logo height (px) | Text field in the inspector. block.json default: 150. Saved as `logoMaxHeight`. |
| Logos — Padding | Numeric range control in the inspector. Range 0–40. block.json default: 14. Saved as `logoPadding`. |
| Logos — Radius | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `logoRadius`. |
| Image fit | Select control; the chosen value is saved on the block. Options: Contain; Cover. block.json default: contain. Saved as `logoFit`. |
| Logos — Opacity | Numeric range control in the inspector. Range 0.1–1. block.json default: 0.8. Saved as `logoOpacity`. |
| Hover opacity | Numeric range control in the inspector. Range 0.1–1. block.json default: 1. Saved as `logoHoverOpacity`. |
| Grayscale | On/off toggle in the inspector. On by default. Saved as `logoGrayscale`. |
| Grayscale on hover | On/off toggle in the inspector. Off by default. Saved as `logoHoverGrayscale`. |
| Hover scale | Numeric range control in the inspector. Range 1–1.2. block.json default: 1.03. Saved as `logoHoverScale`. |
| Link URL | Text field in the inspector. |
| Open in new tab | On/off toggle in the inspector. |
| Item background | Color control in the inspector. block.json default: transparent. Saved as `logoBg`. |
| Item border | Color control in the inspector. block.json default: rgba(0,0,0,0.10). Saved as `logoBorderColor`. |
| Indicator | Color control in the inspector. block.json default: rgba(0,0,0,0.22). Saved as `carouselIndicatorColor`. |
| Indicator active | Color control in the inspector. block.json default: rgba(0,0,0,0.65). Saved as `carouselIndicatorActiveColor`. |
| Progress background | Color control in the inspector. block.json default: rgba(0,0,0,0.12). Saved as `carouselProgressBg`. |
| Progress foreground | Color control in the inspector. block.json default: rgba(0,0,0,0.55). Saved as `carouselProgressFg`. |
| Fraction color | Color control in the inspector. block.json default: rgba(0,0,0,0.65). Saved as `carouselFractionColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-bkbg-autoplay, data-bkbg-autoplay-delay, data-bkbg-autoplay-hover, data-bkbg-autoscroll, data-bkbg-autoscroll-hover, data-bkbg-autoscroll-speed, data-bkbg-dot, data-bkbg-fraction.
When this is the right block
- Show client/partner logos in a responsive carousel or grid — that is the job of Logo Carousel, not a generic content block.
- Use it when you need the editor control labeled “Display”, which exists on this block’s inspector.
- It matches pages about logo, carousel, clients.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Logo Carousel block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Logo Carousel”. It sits under Marketing. After insert, open Layout and set “Display”, “Columns”, “Layout — Gap”, “Visible logos”.
What makes Logo Carousel different from other Blockenberg blocks?
Show client/partner logos in a responsive carousel or grid. Inspector labels on this block include “Display”, “Columns”, “Layout — Gap”, “Visible logos”.
Is the Logo Carousel Gutenberg block free?
Yes. Logo Carousel ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Logo Carousel to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Layout, Carousel, Logos, Selected Logo).
Related marketing blocks
Client Showcase
"Trusted by" section featuring client logos with optional tagline, grayscale hover effect, and a pull-quote from a featured client.
Logo Grid
A clean partner, client or 'as seen in' logo grid with optional label, grayscale effect, box backgrounds and multiple layouts.
Logo Wall
Display a static grid of client or partner logos with hover effects, grayscale mode, and optional links.
Social Proof Section
Complete social proof landing section combining client logos, stats, and a featured testimonial quote — all in one configurable block.
Testimonial Carousel
Auto-playing testimonial slider with stars, avatars, and dot/arrow navigation.
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Logo Carousel from the Gutenberg inserter.