Logo Carousel Slider
Actual screenshot with sample data
A smooth, infinite-scrolling logo carousel perfect for showcasing press features, client logos, or brand partnerships. Features responsive design with auto-play controls, hover pause functionality, and seamless looping for continuous brand exposure.
Overview
The Logo Carousel Slider provides an elegant solution for displaying multiple logos in a space-efficient, engaging format. With infinite scrolling capabilities, responsive layout adaptations, and flexible logo integration options, this widget is ideal for building social proof, showcasing partnerships, or highlighting press coverage in a visually appealing carousel format.
Key Features
Infinite Auto-Scrolling
- Seamless Looping: Clone-based infinite scroll without visual breaks
- Customizable Speed: Adjustable autoplay timing (default: 1000ms)
- Bidirectional Scrolling: Left or right scrolling direction options
- Smooth Transitions: CSS-powered animations with easing
Responsive Layout System
- Desktop: 6 logos visible simultaneously
- Tablet: 3 logos optimized for medium screens
- Mobile: 2-column static grid layout
- Adaptive Transitions: Automatic layout switching on resize
Flexible Logo Integration
- Dual Format Support: Both image logos and SVG icons
- Consistent Sizing: Maximum 160px width × 60px height
- Object-Fit Contain: Perfect logo preservation without distortion
- Quality Maintenance: High-quality rendering at all screen sizes
Interactive Controls
- Hover Pause: Automatic pausing on user interaction
- Smooth Restart: Seamless resumption after pause
- Performance Optimized: Efficient JavaScript with minimal repaints
- Touch Friendly: Mobile-optimized static layout
Configuration Options
General Settings
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | Text | "As seen in" | Section title text |
| Background Color | Color | #e0e0e0 | Container background color |
Typography Settings
Heading Styling
| Setting | Type | Default | Description |
|---|---|---|---|
| Color | Color | #000000 | Heading text color |
| Font Weight | Range (100-900) | 700 | Bold weight emphasis |
| Font Size | Number | 18px | Heading size in pixels |
| Padding | Box Model | 0px top/sides, 10px bottom | Internal spacing |
| Margin | Box Model | 0px all | External spacing |
Slide Behavior
| Setting | Type | Default | Description |
|---|---|---|---|
| Autoplay Speed | Input | 1000ms | Slide transition interval |
| Autoplay Direction | Select | Left | Scroll direction (Left/Right) |
Container Layout
Spacing Controls
- Container Padding: 20px top, 30px bottom (default)
- Container Margin: 0px all (default)
- Logo Padding: 20px vertical padding
- Grid Gaps: 6rem row gap on mobile
Logo Configuration
Each logo item supports:
| Setting | Type | Default | Description |
|---|---|---|---|
| Logo Type | Select | Image/SVG | Format selection |
| Image Logo | Image Manager | Forbes logo | Upload logo image |
| HTML Code | Code Editor | Custom SVG | SVG icon code |