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

Let's 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:

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.
      • That kind of worked but instead of linking to the links I set it just reloads my page. I’ve removed the labels as I just want the logos if that makes any difference? I also want them opening in a new tab, I set this when adding the links but not sure if it needs to be added into the code.

  • magnifiercross
    >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: