Logo ticker with ACF Pro and bxSlider in Oxygen

This members-only tutorial provides the steps to display a continuously scrolling logo carousel ticker that pauses on hover using Advanced Custom Field Pro's Repeater field and bxSlider jQuery script in Oxygen.

The ACF repeater field is going to have image and label sub fields. We shall set the label to appear on hover.

Step 1

Create a custom image size so the carousel images are uniform.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes

Code:

add_image_size( 'carousel-image', 200, 135, true );

If the logo images that you want to show in the carousel are already present in the Media library, regenerate thumbnails.

Step 2

Install and activate ACF Pro.

Go to Custom Fields > Add New.

Title: Page Meta

Add a Repeater type field named say, carousel.

Add image image-type and label text-type sub fields.

Set the field group to appear on Pages.

Screenshot | ACF export file

Step 3

Edit the Page on which you would like to show the logo carousel (usually, the Page set as static homepage in Settings > Reading).

Scroll down to Page Meta meta box and add as many logo images and labels as you want.

Step 4

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site’s /wp-content/plugins/my-custom-functionality-master directory.

Upload jquery.bxslider.min.js to plugin's assets/js directory.

Edit plugin.php and inside custom_enqueue_files() add

if ( is_front_page() ) {
    wp_enqueue_script( 'bxslider', plugin_dir_url( __FILE__ ) . 'assets/js/jquery.bxslider.min.js', array( 'jquery' ), '4.2.1', true );
}

Replace if ( is_front_page() ) { if needed depending on where you want to load bxSlider.

Step 5

Edit the Page with Oxygen editor.

Add a Section.

You may want to set Horizontal Item Alignment to Center and Section Container Width to full-width.

Add a Code Block.

PHP: