Stop the Latest News section carousel from auto-playing in Zelle Pro

Important notice: This product is now in maintenance mode and is no longer being actively developed or supported. Updates and bug fixes will not be provided unless they relate to security concerns.

If you are using Zelle PRO, and you enjoy using the Latest News section, but you hate the autoplay action for the carousel / slider, then this guide is for you!

This guide will teach you how to disable the autoplay effect for the carousel, but your visitors can still navigate through it by using the left & right arrows.

NOTE: To make this easier and quicker for you, we have a ready-to-use child theme for Zelle PRO with the solution already implemented so you don't have to follow this guide anymore.

You can download it from here. If you need help installing it, please check this guide on How to Install WordPress themes.

WARNING: If you are already using a child theme for Zelle PRO, please DO NOT download the child theme mentioned above. All you need to do is to follow the steps below instead.

What do I need to do?

First of all, you need to create a child theme. Why a child theme? Because child themes are specially created for customizations of this kind. You can always edit your child theme's files directly, without affecting the real theme. 

In order to create a child theme, please follow this guide: How to create a Child theme. The instructions from this guide are already using Zelle PRO as an example.

At this point, your child theme should have 2 files:

• The functions.php file
• The style.css file

Next, you need to create a new file in which you will add the code that will stop the carousel from automatically playing. You need to create a file called zelle-child-scripts.js.

After creating this new file, please add the following code inside it:

jQuery(document).ready(function () {
    jQuery('#carousel-homepage-latestnews').carousel({
        pause: true,
        interval: false
    });
});<br>

Next, please go inside your functions.php file, and at the end of the file, add the following code:

function zelle_stop_carousel_autoplay(){
    wp_enqueue_script('zelle-child-scripts', trailingslashit( get_stylesheet_directory_uri() ) . 'zelle-child-scripts.js', array('jquery'),'1.1', true);
}
add_action( 'wp_enqueue_scripts', 'zelle_stop_carousel_autoplay' );<br>

If you've reached this far, then your child theme is ready to be installed and activated. If you need help with that, please follow this guide: How to Install WordPress themes

That's all!