Magnolia - Post slider

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 Magnolia 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 5 layout options available for the slider in Magnolia:

  1. Carousel Post Slider with transparent title (default)
  2. Carousel Post Slider with boxed title
  3. Post Slider with Image on the Left
  4. Post Slider with Image on the Right
  5. Centered Full-Width Post Slider 

You can access all five options in the Magnolia Block Collection! Search "Post Slider."

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 > magnolia-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 1000 (1 second); 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 3500 (3.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 enable 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.