Custom slider in Oxygen using ACF and Owl carousel

September 12, 2018 Sridhar Katakam 6 Comments

Favorited by:

2

Oxygen, Plugins, Premium ACF Pro, Owl, Slider

In this members-only tutorial, I show how to

use Advanced Custom Fields Pro to register a `slides` repeater field having slide_image, slide_content, button_text and button_url sub fields
output these in a Code Block element inside an section of Oxygen
load and initialize responsive Owl jQuery carousel on the code block
add CSS to style the slider arrows, CTA button etc.

Requirements:

Pro version of Advanced Custom Fields
The ability to upload files to a plugin directory. This needs to be done via cPanel file manager or a FTP client.

Step 1

Install and activate my custom functionality plugin.

Upload owl.carousel.min.css and owl.theme.default.min.css to the plugin's assets/css directory and owl.carousel.min.js to plugin's assets/js directories via a FTP client.

Step 2

Install and activate ACF Pro.

Step 3

Let's load the CSS and JS files of Owl on the page where the slider is to be shown (homepage in this example), register a custom size for images in the slider and enable ACF settings page.

Edit plugin's plugin.php file.

Replace the code inside custom_enqueue_files() with:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

6 comments on “Custom slider in Oxygen using ACF and Owl carousel”

twistedkaos says:

September 12, 2018 at 12:21 pm

All of your tutorials use AFC pro, any way you could do one with pods instead?

Loading...

Reply
1. Sridhar Katakam says:
  
  September 12, 2018 at 12:28 pm
  
  I just did a search for “pods repeater field” and came across https://wordpress.org/plugins/panda-pods-repeater-field/.
  
  Next time a tutorial needs a Repeater, I’ll try to use this instead of ACF Pro and write a tutorial.
  
  Loading...
  
  Reply

i followed your tutorial, and now it works, i changed the php code because i don’t need a options_page, and now i wanna know, how can i put the content and the button straight in the middle of the whole slider like an overlay?

Reply

Make these changes:

1) Change PHP code to:

<?php
    if ( have_rows( 'slides' ) ) {

        while ( have_rows( 'slides' ) ) {
            the_row();

            $image = get_sub_field( 'slide_image' );
            $slide_content = get_sub_field( 'slide_content' );
            $button_text = get_sub_field( 'button_text' );
            $button_url = get_sub_field( 'button_url' );

            echo '<div class="slide">';

                printf( '<div class="slide-image"><img src="%s" alt="%s" /></div>',
                    $image['sizes']['slider-image'],
                    $image['alt']
                );

                echo '<div class="slide-overlay">';

                    if ( $slide_content ) {
                        echo '<div class="slide-content">' . $slide_content . '</div>';
                    }

                    if ( $button_url ) {
                        printf( '<div class="slide-cta"><a href="%s" class="button">%s</a></div>', $button_url, $button_text );
                    }

                echo '</div>';

            echo '</div>';
        }
    } else {
        // no rows found.
    }
?>

2) Add

@media only screen and (min-width: 768px) {
  .slide {
    position: relative;
  }

  .slide-overlay {
    color: #fff;
    background-color: rgba(35, 44, 57, 0.9);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}