Why is the Owl Carousel not working on my Webflow project?
TL;DR
- Include jQuery before Owl Carousel CSS and JS files in Project Settings, ensuring all scripts are loaded only once.
- Initialize Owl Carousel with
$(document).ready()and avoid using Webflow components or interactions that may conflict.
If Owl Carousel isn't working in your Webflow project, it's typically due to incorrect script setup, missing jQuery, or conflicts with Webflow’s built-in features.
1. Include All Required Files
- Owl Carousel relies on jQuery, so you must include the jQuery library before Owl Carousel in your project.
- Make sure you’ve added these in the correct order within Project Settings > Custom Code (in the
<head>or before</body>): - jQuery (e.g. from CDN)
- Owl Carousel CSS and JS (both are required)
- Do not rely on Webflow’s jQuery if you’ve turned off “Include jQuery” under Project Settings > Advanced—you’ll need to manually include it via CDN.
2. Proper Initialization
- Owl Carousel must be initialized using JavaScript after the page loads. Example (add inside before
</body>tag within Custom Code): $(".owl-carousel").owlCarousel({...});- Make sure your DOM is ready before triggering the initialization. Wrap your code in:
$(document).ready(function(){ ... });
3. Ensure Unique Class Naming
- Owl Carousel should be initialized on an element with class like
.owl-carousel. Ensure no naming conflict with Webflow classes. - Use a plain
<div>with a custom class name (e.g.owl-carousel), not a Webflow pre-styled component like Slider or Collection directly.
4. Check for jQuery Version Conflicts
- Webflow includes jQuery v3.5.1 by default. Owl Carousel v2 is compatible with this version.
- If you include an external version of jQuery, make sure it is equal to or compatible with v3+ to prevent errors.
5. Load Scripts Only Once
- If your scripts are duplicated (e.g. added in both Page Settings and Project Settings), it can cause failures.
- Verify all third-party scripts like Owl Carousel are only loaded once per page.
6. Disable Conflicting Webflow Interactions
- Webflow interactions (IX2) may interfere with manually controlled components. Test the carousel on a blank page without interactions.
- Avoid animating or modifying the same elements that Owl Carousel is controlling.
Summary
Ensure you’ve loaded jQuery before Owl Carousel, added all necessary CSS/JS files, initialized the carousel after DOM load, and avoided conflicts with Webflow classes or interactions. This sequence almost always resolves Owl Carousel issues in Webflow projects.