Mia - Post slider options

The free version of Kadence doesn't include a post slider, so we built a custom slider! 🙌🏻 In this tutorial, we'll show you how to modify the slider settings.

Mia includes two slider styles:

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 Mia 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 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 > mia-slider.js. We recommend creating a backup of this file before making any changes.

Within this file, you'll see two sections: "Main Carousel Slider" and "Alternate Slider."

Main Carousel Slider

Here are the settings in this section that can be modified:

  • slidesToScroll: Number of slides that scroll by when you click the Next/Prev arrows. Default is 1; can be changed to any positive number (2, 3, 4, etc).
  • speed: Speed at which a new slide transitions in. Default is 1500 (1.5 seconds); can be changed to any positive number.
  • centerMode: This is what creates the "cut off" images on the left and right of the carousel slider. Default is true. If you'd like your slider to display full-width – no partial images on the sides – you can change this to false.
  • centerPadding: Padding between slides when centerMode is set to true. Default is 6%; 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 3000 (3 seconds); can be changed to any positive number.
  • arrows: Show or hide navigation arrows. Default is true; can be changed to false to disable arrows.

Note: We do not recommend changing the slidesToShow setting.

Other Options for Main Carousel Slider

Below are some custom codes that will modify the carousel slider in different ways. These codes can be added to your site at Appearance > Customize > Additional CSS.

  • When centerMode is DISABLED, remove all space between slides: Code snippet
  • Show all entry titles (instead of just one at a time): Code snippet
  • Reposition each entry title below image: Code snippet
  • Show all entry titles AND reposition entry titles below images: Code snippet
  • Add white background to prev/next arrows (helpful if your featured images tend to be darker): Code snippet

Alternate Slider

Here are the settings in this section that can be modified:

  • slidesToScroll: Number of slides that scroll by when you click the Next/Prev arrows. Default is 1; can be changed to any positive number (2, 3, 4, etc).
  • 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 3000 (3 seconds); can be changed to any positive number.
  • dots: Show or hide navigational dots below slider. Default is true; can be changed to false to disable dots.

Note: We do not recommend changing the slidesToShow setting. 

Right Aligned Slider Image in the Alternate Slider

By default, the Alternate Slider displays image on the left and title/excerpt on the right. Prefer to swap it so image is on the right? Here's a code snippet. Add this at Appearance > Customize > Additional CSS.