Fusion Carousel Mobile Issue
February 4, 2025 ยท AI Conversations
not working in mobile
### 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. ๐