Clover - Post slider options

The free version of Kadence doesn't include a post slider, so we built a custom slider! 🙌🏻 You can see it in action on Home Option 3, but it can be added to any page you'd like. In this tutorial, we'll show you how to modify the slider settings.

Slider options in the block editor

First, please note that the slider will not run within the block editor. This is normal! In the block editor, you'll see a Posts block in place of the slider, and the slider will run on the front end.

The custom post slider in the Clover theme uses the Posts block as its base, so all of the options available in the Posts block are available for you to change! Through the Posts block settings, you can do things like:

  • Select a new image size
  • Change the number of posts in the slider
  • Choose which posts display (learn more)
  • Enable/disable post date
  • Enable/disable post category
  • Enable/disable post excerpt
  • Enable/disable read more button

Slider layouts

There are 3 layout options available for the slider in Clover:

  1. Left Image / Right Text (default)
  2. Right Image / Left Text
  3. Centered with Overlay (full width image)

You can access all three options in the Clover Block Collection!

Slider options in the slider JS file

NOTE: The rest of this tutorial is considered intermediate-level and involves light code editing. Please proceed with caution.

To access the slider JS file, go to Appearance > Theme File Editor > js > amelia-slider.js. We recommend creating a backup of this file before making any changes.

Available Settings

Here are the settings in this file that you can modify:

  • speed: Speed at which a new slide transitions in. Default is 1500 (1.5 seconds); can be changed to any positive number.
  • autoplay: Determines if slider moves to next slide automatically or not. Default is true; can be changed to false to disable autoplay.
  • autoplaySpeed: Speed at which the slider moves to the next slide. Default is 4500 (4.5 seconds); can be changed to any positive number.
  • dots: Show or hide navigation dots below the slider. Default is false; can be changed to true to disable dots.
  • arrows: Show or hide navigation arrows. Default is true; can be changed to false to disable arrows.

Note: We do not recommend changing any other settings beyond what is listed above.