Logo Carousel

How to use Logo Carousel Widget of Sky Addons for Elementor

The Logo Carousel widget allows you to showcase logos of clients, sponsors, brands, or partners in a sleek and responsive carousel layout. This widget is perfect for adding trust and social proof to your website while keeping your design modern and interactive. Built with flexibility in mind, you can control carousel speed, autoplay, tooltip display, lightbox support, and individual logo styling—all without touching a line of code.

Features:

1. Showcase logos in a responsive carousel format
2. Supports tooltips, links, and lightbox options
3. Multiple styles, navigation, and autoplay controls
4. Fully customizable logo and carousel appearance
5. Lightweight and smooth transitions

Insert Logo Carousel Widget

1. Open Elementor Editor. In the Elementor panel, search for “Logo Carousel” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Layout Section

1. Columns – Choose how many logos to show per row (1–6).
2. Logo List – Add logos via repeater with full customization:
   • Logo – Upload your logo image.
   • Link – Add a custom or media file URL.
   • Brand Name – Title for the logo.
   • Brand Text – Description or tagline.
   • Show Tooltip – Enable/disable tooltip on hover.
   • Tooltip Placement – Choose top, bottom, left, or right.
3. Select Style – Choose between “None” or “Box” design.
4. Image Resolution – Adjust resolution for quality control.
5. Image Cover Size? – Stretch image to fit the frame.
6. Link Open Type – Choose Media File, Custom URL, or None.
7. Lightbox – Enable to view logos in a popup modal.

Carousel Settings

1. Height – Set the height of the carousel in pixels.
2. Item Gap – Space between each logo/item.
3. Transition – Animation speed between slide switches.
4. Autoplay – Automatically rotate through logos.
5. Loop – Restart the carousel when the end is reached.
6. Slide Speed – Time to complete one slide (ms).
7. Pause on Hover – Stops autoplay when hovered.
8. Slides Per Group – Move grouped slides together.
9. Observer – Auto-detect changes in DOM or layout.
10. Centered Slides – Centers the active slide.
11. Grab Cursor – Show a grab hand cursor on hover.
12. Free Mode – Freely scroll logos with momentum.

Navigation

1. Show/Hide Navigation – Toggle previous/next arrows.
2. Prev Icon – Choose the icon for the previous arrow.
3. Next Icon – Choose the icon for the next arrow.

Pagination

1. Type – Choose between Bullets, Fraction, or Progressbar.
2. Dynamic Bullets? – Bullets change size dynamically.
3. Alignment – Align pagination center, left, or right.

Tooltip Settings

1. Animation – Choose from Scale, Shift-away, etc.
2. Offset – Adjust spacing from the logo.
3. Show Arrow – Enable/disable tooltip arrow.
4. Trigger on Click – Show tooltip on click instead of hover.

Style Customization

Carousel Item

1. Padding – Adjust inner space around the logo inside each item container.
2. Border – Add or style border lines for logo boxes.
3. Radius – Control corner roundness for logo containers.
4. Background – Set custom background color or gradient.
5. Shadow – Apply box shadow to give depth or highlight logos.
6. Opacity – Control transparency for each logo item.
7. CSS Filters – Apply effects like blur, brightness, contrast, etc.
8. Hover Mode – Enable all above styles to change on hover interaction.

Navigation

1. Size – Define width and height of the nav icons.
2. Position Offset – Adjust icon position from edges.
3. Border – Style the outer line of nav buttons.
4. Radius – Curve the edges of the nav icons.
5. Color – Set icon color for normal state.
6. Background – Customize background color behind icons.
7. Shadow – Add shadows around nav icons for depth.
8. Hover Mode – Change all above styles on hover.

Pagination

1. Vertical Position – Move pagination bullets up or down.
2. Bullet Height – Set height for each pagination dot.
3. Bullet Width – Set width to create round or rectangular bullets.
4. Radius – Round the bullet corners or make them circular.
5. Spacing – Control the distance between each bullet.
6. Pagination Color – Set the default bullet color.
7. Active Color – Change color of the active/selected bullet.

Tooltip

1. Width – Set fixed width for tooltip boxes.
2. Alignment – Align tooltip text: left, center, or right.
3. Background – Set tooltip background color or gradient.
4. Padding – Adjust inner space around tooltip content.
5. Border – Add a border around the tooltip box.
6. Radius – Round the corners of the tooltip.
7. Box Shadow – Add shadows for a floating effect.
8. Color – Set tooltip text color.
9. Typography – Control font, size, weight, and spacing.
10. Arrow Color – Set color of the tooltip arrow pointer.
11. Title Style – Customize typography and color for title separately.
12. Text Style – Set different styles for description text within tooltip.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Carousel not sliding? Check that Loop or Autoplay is enabled.
2. Images not showing properly? Confirm resolution or cover settings.
3. Tooltip not visible? Ensure tooltip is enabled and placed correctly.
4. Navigation not appearing? Double-check visibility settings and icons.

Conclusion

The Logo Carousel widget adds professional credibility to your site by elegantly displaying brand or partner logos in motion. Whether you’re showcasing client lists, sponsors, or featured partners, this widget gives you all the tools for seamless customization and interactivity—perfectly integrated with Elementor.