Fusion Carousel Mobile Issue

User
fusion-image-carousel fusion-image-carousel-auto fusion-carousel-border
not working in mobile
Assistant
If your **Fusion Image Carousel** (from Avada) is not working on mobile, here are a few things to check and troubleshoot:

### 1. **Check Avada's Mobile Settings**
– Go to **Avada > Options > Fusion Builder Elements > Image Carousel**.
– Ensure **Disable Carousel on Mobile** is **not enabled**.

### 2. **Check JavaScript Errors**
– Open **Developer Console** (`F12` > Console) in Chrome/Firefox on mobile.
– Look for any JavaScript errors related to `fusion-carousel` or `Owl Carousel`.

### 3. **Force Owl Carousel to Initialize on Mobile**
Add the following jQuery code in **Avada > Options > Custom JS**:

jQuery(document).ready(function($) {
    if ($(window).width() < 768) {
        $('.fusion-image-carousel').each(function() {
            if (!$(this).hasClass('owl-loaded')) {
                $(this).owlCarousel({
                    items: 1,
                    loop: true,
                    autoplay: true,
                    nav: false,
                    dots: true
                });
            }
        });
    }
});

This ensures the carousel initializes properly on mobile.

### 4. **Check for Conflicting CSS**
– Some CSS may be hiding the carousel on mobile.
– Use **Inspect Element** and check if the `.fusion-image-carousel` has `display: none;` or `visibility: hidden;`.

Try adding this CSS:

@media (max-width: 768px) {
    .fusion-image-carousel {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

### 5. **Update Avada and Fusion Builder**
– Ensure **Avada, Fusion Builder, and Fusion Core** are updated to the latest versions.
– Sometimes outdated scripts cause conflicts.

### 6. **Test with a Different Theme**
– Switch to a default theme (e.g., Twenty Twenty-Four).
– If it works, the issue may be with your **child theme's customization**.

### 7. **Disable Lazy Loading for Carousel Images**
– If you're using lazy loading from Avada, **disable it for the carousel images** in:
**Avada > Performance > Lazy Load Images**.

If none of these work, let me know the **page URL** (if possible), so I can inspect it further. ๐Ÿš€

Leave a Comment

Your email address will not be published. Required fields are marked *