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
![](https://wpdevdesign.com/wp-content/uploads/2019/06/logo-ticker-oxygen-1024x248.png)
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.
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.
![](https://i2.wp.com/wpdevdesign.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-10-at-12.19.12-am.png?fit=1024%2C517&ssl=1)
![](https://i2.wp.com/wpdevdesign.com/wp-content/uploads/2019/06/Screen-Shot-2019-06-10-at-12.21.26-am.png?fit=1024%2C681&ssl=1)
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 ($47/month or $599 one-time).
Already a member? Log in below or here.