Owl Carousel Integration Code

February 13, 2025 · AI Conversations

User

echo '
';

foreach ($settings['scroll_list_v2'] as $index => $item) {
$opacity = ($index == 0) ? 'active' : '';
echo '

' . esc_html($item['timeline_title']) . '
' . wp_kses_post($item['timeline_desc']) . '
' . esc_html($item['button_text']) . '

';
}

echo '';
Convert above to owl scroll

Assistant

Here's your PHP code modified to use Owl Carousel for scrolling:

### Steps Taken:
1. **Wrap the slides** inside an Owl Carousel container with `class="owl-carousel"`.
2. **Include necessary classes** to initialize Owl Carousel.
3. **Ensure Owl Carousel is loaded** (you need to enqueue the scripts in WordPress if not already included).

—

### **Updated Code for Owl Carousel**:

echo '<div class="slider-container">
        <div class="owl-carousel owl-theme">';

foreach ($settings['scroll_list_v2'] as $index => $item) {
    echo '<div class="slide">
            <div class="left"><img src="' . esc_url($item['timeline_image']['url']) . '" /></div>
            <div class="right">
                <h4>' . esc_html($item['timeline_title']) . '</h4>
                <p>' . wp_kses_post($item['timeline_desc']) . '</p>
                <a href="' . esc_url($item['button_link']['url']) . '" class="post-scroll-button">' . esc_html($item['button_text']) . '</a>
            </div> 
          </div>';
}

echo '</div></div>';

—

### **Include Owl Carousel Scripts (if not included already)**
In your `functions.php` file, enqueue Owl Carousel:

function enqueue_owl_carousel() {
    wp_enqueue_style('owl-carousel-css', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css');
    wp_enqueue_style('owl-theme-css', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css');
    wp_enqueue_script('jquery');
    wp_enqueue_script('owl-carousel-js', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_owl_carousel');

—

### **Initialize Owl Carousel**
Place this inside your theme’s footer or in an appropriate script file:

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

—

### **Final Notes**
– If Owl Carousel is already included in your theme or plugin, you can skip the enqueue part.
– You can customize settings like `items`, `autoplay`, `loop`, etc., based on your preference.

This will transform your slider into an Owl Carousel-powered scrolling slider! 🚀

User

change all class like slider-container to owl-container

Assistant

Here's your updated PHP code with all class names changed from `slider-container` to `owl-container`:

### **Updated Code:**

echo '<div class="owl-container">
        <div class="owl-carousel owl-theme">';

foreach ($settings['scroll_list_v2'] as $index => $item) {
    echo '<div class="owl-slide">
            <div class="owl-left"><img src="' . esc_url($item['timeline_image']['url']) . '" /></div>
            <div class="owl-right">
                <h4>' . esc_html($item['timeline_title']) . '</h4>
                <p>' . wp_kses_post($item['timeline_desc']) . '</p>
                <a href="' . esc_url($item['button_link']['url']) . '" class="owl-post-scroll-button">' . esc_html($item['button_text']) . '</a>
            </div> 
          </div>';
}

echo '</div></div>';

—

### **Updated JavaScript for Owl Carousel**

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

—

### **Changes Made**
✅ `slider-container` → `owl-container`
✅ `slide` → `owl-slide`
✅ `left` → `owl-left`
✅ `right` → `owl-right`
✅ `post-scroll-button` → `owl-post-scroll-button`

This ensures your classes are now Owl Carousel-specific while keeping everything functional. 🚀 Let me know if you need further tweaks! 😊

Owl Carousel Integration Code

Leave a Comment Cancel