OwlCarousel2 CDN Integration Sage

### 1. Open `setup.php`
Navigate to your Sage theme's `app/setup.php` file and open it.

### 2. Enqueue Owl Carousel CDN
Add the following lines inside the `add_action('wp_enqueue_scripts', function () { … })` function:

add_action('wp_enqueue_scripts', function () {
    // Enqueue Owl Carousel CSS
    wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css', [], null);

    // Enqueue Owl Carousel Theme CSS (optional)
    wp_enqueue_style('owl-theme', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css', ['owl-carousel'], null);

    // Enqueue Owl Carousel JS
    wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', ['jquery'], null, true);
});

### 3. Initialize Owl Carousel (Optional)
If you need to initialize Owl Carousel, you can add a script inside your theme:

– Create a new JS file in `resources/scripts/owl-init.js` and add:

jQuery(document).ready(function ($) {
      $(".owl-carousel").owlCarousel({
          loop: true,
          margin: 10,
          nav: true,
          responsive: {
              0: {
                  items: 1
              },
              600: {
                  items: 2
              },
              1000: {
                  items: 3
              }
          }
      });
  });

– Then enqueue it in `setup.php`:

add_action('wp_enqueue_scripts', function () {
      wp_enqueue_script('owl-init', get_theme_file_uri('/resources/scripts/owl-init.js'), ['jquery', 'owl-carousel'], null, true);
  });

Now, you can use Owl Carousel in your Sage theme by adding an element like:

<div class="owl-carousel">
    <div><img src="image1.jpg" alt="Image 1"></div>
    <div><img src="image2.jpg" alt="Image 2"></div>
    <div><img src="image3.jpg" alt="Image 3"></div>
</div>

Let me know if you need modifications! 🚀

—

### ✅ 1. Ensure Swiper.js is Loaded
Elementor uses **Swiper.js** for sliders and carousels. Sometimes, it might not load properly due to conflicts or missing dependencies.

**Fix:** Manually enqueue Swiper in `functions.php` or `setup.php` (for Sage theme):

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('swiper', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js', [], null, true);
    wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css', [], null);
});

—

### ✅ 2. Check JavaScript Console for Errors
– Open **Developer Tools** (`F12` in Chrome).
– Check for errors in the **Console**.
– If you see `Swiper is not defined`, it means the script is missing or conflicting.

—

### ✅ 3. Disable Lazy Loading for Swiper
Some caching or optimization plugins (e.g., WP Rocket, W3Speedster) might lazy-load Swiper, causing issues.

**Fix:**
– Go to **WP Rocket → File Optimization** → **Exclude Swiper.js from defer**.
– For W3Speedster, exclude `swiper-bundle.min.js` from optimization.

—

### ✅ 4. Make Sure Swiper is Initialized
If Swiper is loaded but still not working, manually initialize it.

Create a custom JS file (e.g., `resources/scripts/swiper-init.js` in Sage) and add:

document.addEventListener("DOMContentLoaded", function () {
    if (typeof Swiper !== "undefined") {
        new Swiper(".swiper-container", {
            loop: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });
    }
});

Then enqueue it in `setup.php`:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('swiper-init', get_theme_file_uri('/resources/scripts/swiper-init.js'), ['swiper'], null, true);
});

—

### ✅ 5. Check Elementor's Swiper Version
Elementor might use an older version of Swiper. If your theme or plugin loads a different Swiper version, it can break things.

**Fix:**
– Go to **Elementor → Tools → Regenerate Files**.
– Check if another plugin/theme is loading an older Swiper version.

—

### ✅ 6. Test With Elementor Safe Mode
Go to **Elementor → Settings → Advanced → Enable Safe Mode** and test if the issue persists. If it works in Safe Mode, a plugin is likely conflicting.

—

### ✅ 7. Disable Conflicting Plugins
Try disabling plugins one by one, especially **performance plugins** (e.g., Autoptimize, WP Rocket, Asset Cleanup).

—

### ✅ 8. Switch to a Default Theme (For Debugging)
Switch to **Twenty Twenty-Four** temporarily and check if Swiper works. If it does, your theme (or Sage setup) might be interfering.

—

### ✅ 9. Use Elementor’s Swiper
If Elementor’s built-in Swiper is broken, force it to use its own:

add_action('elementor/frontend/after_enqueue_scripts', function () {
    wp_enqueue_script('elementor-swiper');
    wp_enqueue_style('elementor-swiper');
});

—

### ✅ 10. Reinstall Elementor
If nothing works, try reinstalling Elementor:
1. Deactivate and delete Elementor.
2. Reinstall it from **Plugins → Add New**.
3. Regenerate Elementor files again.

—

### 🔥 Conclusion
– **If Swiper is missing**, enqueue it manually.
– **If it's not initializing**, add a custom script.
– **If it's conflicting**, disable other Swiper versions.
– **If caching is causing issues**, exclude Swiper from optimization.

Try these steps and let me know what errors you see in the Console! 🚀