# Multi Item Carousel Widget

A powerful Elementor widget that creates responsive, multi-item carousels with advanced customization options.

## Features

### ✅ Core Functionality
- **Multi-Item Display**: Show 1-6 items per slide with responsive breakpoints
- **Flexible Content**: Each slide supports rich WYSIWYG content (images, text, buttons, etc.)
- **Swiper.js Powered**: Uses the latest Swiper.js library for smooth performance
- **Responsive Design**: Different settings for desktop, tablet, and mobile

### ✅ Navigation & Controls
- **Navigation Arrows**: Customizable prev/next arrows with hover effects
- **Pagination Dots**: Clickable dots with active state styling
- **Keyboard Support**: Arrow key navigation for accessibility
- **Touch/Swipe**: Full touch and swipe support on mobile devices

### ✅ Autoplay Options
- **Auto-advance**: Configurable autoplay with custom speed (1-10 seconds)
- **Pause on Hover**: Automatically pause when user hovers over carousel
- **Visibility API**: Pause when tab is not visible to save resources

### ✅ Advanced Settings
- **Infinite Loop**: Enable/disable continuous looping
- **Slides to Scroll**: Control how many slides move at once
- **Space Between**: Customizable gap between slides
- **Transition Speed**: Adjustable animation speed (100-3000ms)

### ✅ Styling Options
- **Container Styling**: Background, borders, shadows, border radius
- **Slide Styling**: Individual slide backgrounds, padding, borders
- **Arrow Styling**: Size, colors, background, hover effects
- **Dot Styling**: Size, spacing, colors for normal and active states

### ✅ Accessibility Features
- **ARIA Labels**: Proper ARIA attributes for screen readers
- **Focus Management**: Keyboard navigation support
- **High Contrast**: Respects user's color scheme preferences
- **RTL Support**: Right-to-left language support

## Usage

1. **Add Widget**: Drag "Multi Item Carousel" from Elementor's General category
2. **Add Slides**: Use the repeater to add multiple slides with content
3. **Configure Settings**: Set responsive breakpoints, navigation, autoplay
4. **Style**: Customize appearance using the Style tab
5. **Preview**: Test on different devices using Elementor's responsive preview

## Technical Details

### Dependencies
- **Elementor**: Requires Elementor page builder
- **Swiper.js**: v11.0.0+ (automatically loaded)
- **jQuery**: WordPress default jQuery

### Browser Support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- Mobile browsers (iOS Safari, Chrome Mobile)

### Performance
- **Lazy Loading**: Supports image lazy loading
- **Resource Optimization**: Only loads when widget is used
- **Memory Efficient**: Automatic cleanup on destroy
- **SEO Friendly**: Proper HTML structure for search engines

## File Structure

```
multi-item-carousel-widget/
├── multi-item-carousel-widget.php    # Main widget class
├── assets/
│   ├── multi-item-carousel-widget.css # Widget styles
│   └── multi-item-carousel-widget.js  # Widget JavaScript
└── README.md                          # This file
```

## Customization

### JavaScript API
```javascript
// Initialize carousel manually
MultiItemCarousel.init();

// Destroy carousel
MultiItemCarousel.destroy($('.multi-item-carousel'));

// Reinitialize carousel
MultiItemCarousel.reinitialize($('.multi-item-carousel'));

// Listen to events
$('.multi-item-carousel').on('multiItemCarousel:slideChange', function(e, swiper) {
    console.log('Slide changed to:', swiper.activeIndex);
});
```

## Troubleshooting

### Common Issues

1. **Carousel not initializing**
   - Check if Swiper.js is loaded
   - Verify jQuery is available
   - Check browser console for errors

2. **Responsive settings not working**
   - Clear cache and refresh
   - Check breakpoint values in settings
   - Test in Elementor preview mode

3. **Styling issues**
   - Check for CSS conflicts
   - Use browser developer tools

### Debug Mode
Enable WordPress debug mode to see detailed error messages:
```php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
```

## License

This widget is part of the Relayout Designs plugin and is available as a **free widget** - no license required!

## Support

For support and feature requests, visit [Relayout Designs](https://relayout.in/)