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, Right, Bottom, Left or Auto.
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.
8. Show Brand Name – Display the brand name below each logo, with a selectable HTML tag.

The first carousel in the Logo Carousel demo holds six logos with the Box style. Link is set to Media File, so each logo opens in the lightbox.

Carousel Settings

1. Height – Set the height of the carousel in pixels.
2. Lazy Load – Enable native lazy loading on logo images for better performance.
3. Item Gap – Space between each logo/item.
4. Transition – Choose Slide or Coverflow. Coverflow adds depth, rotate and shadow options.
5. Autoplay – Automatically rotate through logos.
6. Loop – Restart the carousel when the end is reached.
7. Slide Speed – Time to complete one slide (ms).
8. Pause on Hover – Stops autoplay when hovered.
9. Slides Per Group – Move grouped slides together.
10. Observer – Auto-detect changes in DOM or layout.
11. Centered Slides – Centers the active slide.
12. Grab Cursor – Show a grab hand cursor on hover.
13. 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 None, Bullets, Fraction, Progress Bar or Dynamic Bullets.
2. Dynamic Bullets? – This is one of the Type options. The bullets change size as the slides move.
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

Open the Style tab and the Carousel Item section to set padding, border, radius and the Grayscale Effect. The Normal and Hover tabs hold background, box shadow, opacity and CSS filters.

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. Grayscale Effect – Show logos in grayscale and reveal color on hover, or the reverse (color to gray on hover).
8. CSS Filters – Apply effects like blur, brightness, contrast, etc.
9. Hover Mode – Enable all above styles to change on hover interaction.

Brand Name

1. Typography – Control font, size, weight, and spacing of the brand name.
2. Color & Hover Color – Set the brand name color and its color on hover.
3. Spacing – Adjust the gap between the logo and the brand name.

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 carousel, 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, fully integrated with Elementor.

Need help? Our team is happy to answer questions on the Sky Addons support page.