Insurance Companies Carousel - Elementor Widget

A professional, responsive carousel widget for Elementor that displays insurance company logos with smooth animations.

Features

✨ Responsive Design

• Desktop (1025px+): Display 5 logos at once
• Tablet (769px - 1024px): Display 3 logos at once
• Mobile (768px and below): Display 1 logo at once

🎯 Full Customization

• Upload insurance company logo images
• Add links to company websites
• Customize arrow size and color
• Customize arrow hover color
• Adjust logo max width
• Control autoplay on/off
• Set autoplay speed
• Set transition speed

➡️ Smooth Navigation

• Left and right arrow buttons
• Smooth right-to-left sliding animation
• Swiper.js powered for optimal performance
• Touch-friendly on mobile devices

⚙️ Easy Setup

• Simple Elementor integration
• No coding required
• Drag-and-drop interface

Installation

1. Download the plugin folder insurance-companies-carousel
2. Upload it to your WordPress plugins directory: /wp-content/plugins/
3. Go to WordPress Dashboard → Plugins
4. Find "Insurance Companies Carousel" and click Activate
5. Elementor must be installed and activated

Requirements

• WordPress 5.0 or higher
• Elementor 3.0 or higher
• PHP 7.2 or higher

Usage

1. Open any page in Elementor
2. Search for "Insurance Companies Carousel" in the widgets panel
3. Drag the widget onto your page
4. Configure the following settings:

Carousel Settings Tab

• Autoplay: Toggle autoplay on/off
• Autoplay Speed: Set delay between auto-slides (in milliseconds, default: 3000ms)
• Transition Speed: Set slide animation duration (in milliseconds, default: 800ms)

Insurance Logos Tab

• Add New Logo: Click to add insurance company logos
• For each logo:
  • Upload the logo image
  • Enter the company name
  • (Optional) Add a link to the company website
  • Link will open in the same tab by default (change in link options if needed)

Arrow Settings Tab (Style)

• Arrow Size: Set the size of navigation arrows (10px - 100px)
• Arrow Color: Choose the default arrow color
• Arrow Hover Color: Choose the arrow color on hover

Logo Settings Tab (Style)

• Logo Max Width: Set the maximum width for logo images

File Structure

insurance-companies-carousel/
├── insurance-companies-carousel.php    # Main plugin file
├── widgets/
│   └── class-insurance-carousel-widget.php  # Elementor widget class
├── assets/
│   ├── css/
│   │   └── insurance-carousel.css       # Styling
│   └── js/
│       └── insurance-carousel.js        # Carousel functionality
└── README.md                            # This file

Dependencies

• Swiper.js: Used for carousel functionality
• jQuery: Required by Elementor
• Elementor: Core platform

All dependencies are automatically loaded when the plugin is activated.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile, etc.)

Responsive Breakpoints

• Desktop: 1025px and above → 5 items
• Tablet: 769px - 1024px → 3 items
• Mobile: 768px and below → 1 item

Troubleshooting

Carousel not appearing?

• Ensure Elementor is installed and activated
• Clear your browser cache
• Try clearing Elementor cache: Elementor → Settings → General → Clear Cache

Arrows not working?

• Check browser console for JavaScript errors
• Ensure jQuery is loaded
• Verify Swiper.js CDN is accessible

Images not loading?

• Check image file permissions
• Ensure images are uploaded to WordPress Media Library
• Verify image URLs are correct

Responsive layout not working?

• Clear browser cache
• Hard refresh your page (Ctrl+Shift+R)
• Check CSS is loading properly (inspect element)

Development

Modifying the Carousel

To customize carousel behavior, edit:

• assets/js/insurance-carousel.js - Carousel logic
• assets/css/insurance-carousel.css - Styling

Adding New Features

Edit widgets/class-insurance-carousel-widget.php to add new Elementor controls and register them in the register_controls() method.

Support

For issues or feature requests, please refer to the plugin documentation or contact support.

License

GPL v3 - See LICENSE file for details

Changelog

Version 1.0.0

• Initial release
• Full responsive support
• Customizable arrows
• Autoplay toggle
• Image upload functionality

Made with ❤️ for Elementor