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.
VIDEO
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: