How to Turn Your WordPress Galleries into Layer Sliders

If you purchase through a link on our site, we may earn a commission. Learn more.

Turn your WordPress galleries into engaging animated sliders and carousels with Sliderify - an easy to use, standards compliant plugin.
Table of Contents
WP Engine High Performance Hosting
BionicWP Hosting

There are a lot of different slider plugins out there. Some of them, like the ultra-popular Revolution Slider and Layer Slider, allow you to create really engaging slides with multiple elements and animation styles. These are great – but complex. Sometimes it feels like you need to have degrees in engineering and in graphic design just to create the simplest layout. And they never turn out quite the way they look in the demos.

Sliderify aims to give you an easier way to create beautifully animated slideshows, with slide transitions, animated and layered text, and call to action buttons, all simply created from the comfort of the native WordPress gallery editor.

Turn galleries into sliders

The premium version, Sliderify Pro, has a very reasonable starting price of $19 for a single license. There’s also a free version, available from the plugin directory. We’ll be looking at the Pro version in this article.

But do we even need sliders?

First, perhaps you’re thinking that sliders are not your thing. It’s true that they’re not for everyone and there are some use cases where a single static image might be preferable. That’s fine – there’s never going to be one solution that fits every requirement. But it’s undeniable that there are plenty of slider fans out there. In Sliderify’s case, there are several strong reasons why it could work for you:

  • User experience: one of Sliderify’s core features is the option to add a slider lightbox to the default gallery. This gives the user the opportunity to click on an image and view it in more detail then scroll on to the next image, without having to click off the first image, return to the gallery, click on the next image, etc. It’s a better user experience by far.
  • Space saver: if your gallery has a lot of images and is taking up a lot of space on your page, switching it to a slider layout is a neat way of displaying your great images without dominating the rest of the page.
  • Storytelling: if your site or blog has a lot of great photos, laying them out in a slider or carousel allows you to provide your readers with narrative and structure around the images.
  • Mobile friendly: draggable / swipeable image sliders are perfect on mobile devices where users are used to swiping left and right to view more content. It’s far more comfortable than scrolling down a long list of images. Sliderify is fully responsive.
  • Visually engaging: people are naturally susceptible to movement. Subtly animated text and slide transitions can be all you need to grab your users by their eyeballs.

Why Sliderify

Sliderify is different from a lot of other plugins, particularly the big hitters I mentioned at the start of the piece. For one thing, and I think this is essential when you’re choosing a plugin or theme to use, it’s based 100% on WordPress standards, it doesn’t add any weird interface elements, and the whole experience is seamless.

Crucially, apart from the aesthetics, this means that you’re not permanently locked in to the plugin. If you decide to take a different direction with your site in the future you can remove the plugin without fear of breaking anything. Deactivating the plugin won’t affect the content – your galleries will just revert to normal galleries, your featured images will just revert to standard featured images, all the images you’ve used will remain intact.

This is unlike some plugins which use proprietary methods to upload or store images and/or to display them on the page. For example, any plugin that uses its own shortcode to display content will leave the shortcode behind on the page once the plugin is deactivated. None of this happens with Sliderify.

This also means that Sliderify is compatible with other plugins and with most themes. It’s forward compatible: because it uses the native WordPress media and gallery functions, and so it shouldn’t suddenly break with a future WP update.

That’s great, but my theme already has a slider

Some themes come with their own method of creating sliders or have a plugin bundled. That’s fine, and if your particular theme uses its own method to create sliders then you can stick with it. But Sliderify Pro will still allow you to do great things with your galleries inline in your posts and pages.

Sliderify features

Essentially, Sliderify allows you to do the following:

  • Convert a standard WordPress gallery into a slider or carousel
  • Apply an optional Masonry layout to your gallery
  • Add a lightbox slider to your gallery
  • Replace a standard featured image with a slider

Moreover, when you create a slider, you can also:

  • Add titles, captions and call to action buttons to slides
  • Add animated slide transitions
  • Create animated layered slides

We’ll look at each one of these features in more depth and provide simple set-up instructions for each.

Convert a standard WordPress gallery into a slider or carousel

I don’t know if this is the most accurate definition but for the purposes of this article, I’m going to refer to a slider when there’s only one image visible at a time and a carousel when there are more than one image visible.

  1. First of all, open your page or post at the point where you want the slider to appear.
  2. Click the ‘Add Media’ button and click on the ‘Create Gallery’ option on the left hand side of the media window.
  3. Upload or select the images you want to add then click ‘Create a new gallery’ in the bottom right.
    Create a new gallery
  4. In the ‘Edit Gallery’ view, select ‘Slider’ from the ‘Layout’ dropdown box.
    Slider layout
  5. Click ‘Insert Gallery’.

Your gallery will be inserted into your post. While you’re editing, you’ll still see the default gallery layout but when you update and view the post it will be transformed into a slider. Remember that Sliderify respects the image size settings so choose an image size that’s going to work for your page. Often that’s medium or bigger.

You can see working examples for all these galleries on the Sliderify demo site.

Adding slide transitions

Sliderify uses the popular animate.css library to give you upwards of 20 different transition effects between slides. To pick which one you’d like to use in your slider, you’ll notice a few extra options have been added to the ‘Edit Gallery’ view.

Click back into your gallery by selecting the gallery in your post editor and clicking on the pencil icon. In the right hand column of the Edit Gallery view, you can see several new options added by Sliderify. Again, note that these options are added at the point of use, not on a separate settings page, and use core WordPress filters.

Slider settings

Pick your preferred animation style from the Slide Transition then click ‘Update gallery’. Your slider will now use this animation style when transiting from one slide to the next.

Using and animated text captions

A standard feature of the more complex slider plugins is the ability to add layered text with timed animation. Sliderify allows you to do the same but without needing to set X and Y coordinates or lay the text out on a difficult WYSIWYG interface.

Instead, you can display titles and captions over each image. Click on one of the images in your slider and you’ll see a new section, Attachment Details, appear in the right hand column (you may have to scroll down below the Slider Settings section). You can update the image’s title and caption here.

Text and captions

When you’ve edited your titles and captions, you can choose the animation style you’d like to apply from the Text Animation dropdown, then the text position from the Text Alignment dropdown. Sliderify does the rest.

Mountain top

Adding a call to action button

Any good slider that’s being used for marketing is going to need a call to action button. Sliderify gives you the option, again by adding a couple of simple fields to the Edit Gallery view.

Click back into your gallery and select an image as you did in the previous step when editing titles and captions. Scroll down the right hand column some more and you’ll see additional fields for ‘Button Text’ and ‘Links To’. Enter the text you’d like to appear in the call to action button in the first field and either the full URL to an external web page or just the slug for a page in your current site in the second field. Sliderify adds a call to action button that will animate and sync with the text.

Call to action

Sliderify provides its own styles for the button but you can easily override this by adding your own button class in the settings.

That’s how, with a few clicks and always staying within the native media editor, you can add a sophisticated animated layer slider to your posts.

Turn featured images into sliders

We can take the slider a stage forward if we want. Provided your theme is using the default WordPress method to display a featured image (and if it’s not, why not?) then you can display a slider in place of the featured image with a single click.

This is a really great feature if your theme doesn’t already have a method for adding sliders to the top of pages and posts or if its sliders aren’t quite up to the mark. Take a standard WordPress theme like Twenty Seventeen. Here’s what a typical post looks like with a slider instead of a featured image:

Twenty Seventeen theme

You could also replace the featured image with the gallery itself if you wished.

All we did here was create a standard WordPress gallery in the post and click the option to use it as a featured slider. Sliderify replaces the featured image with the first gallery in the post, then removes that gallery from the post content.

Checkbox

I really don’t think that could be simpler.

Carousels

I mentioned carousels above, meaning sliders that display more than one image at a time. If you want to do this with your slider, just select to display more than one image at a time:

Carousel settings

Note also that you can choose to hide titles and captions if you wish by selecting ‘Hide Text’. This may be preferable when you have several smaller images displaying side by side, though Sliderify will automatically resize text to ensure it doesn’t overflow the image.

Adding a lightbox slider to standard galleries

Finally, Sliderify does give you the option of retaining your gallery and adding a slider in a lightbox so that when the user clicks an image, a lightbox will launch displaying the gallery’s images in more detail. You also have the option of applying a masonry layout to your gallery if you wish.

Applying masonry

Adding a masonry layout to your gallery is an optional extra. Just choose ‘Masonry’ from the ‘Layout’ dropdown and all your images will fit nicely together in your gallery, whatever shape and size they are. Users can click an image to launch the slider lightbox.

Pricing

There are three pricing tiers for Sliderify Pro:

  • Single site: $19
  • Two to five sites: $29
  • Unlimited sites: $35

Licenses are valid for a year and entitle you to free support and updates. You can renew your license at a 50% discount.

What next?

On the roadmap for Sliderify are a few top features including:

  • Full screen sliders
  • Thumbnail navigation
  • Different gallery layouts, e.g. Flickr style, flex images
  • Ecommerce integrations

Sliderify is an easy to use plugin that follows WordPress standards and gives you the ability to make engaging animated sliders. You can find out more about Sliderify here.

Gareth Harris

Among other things, Gareth makes plugins and themes for WordPress. He writes occasional blog posts at catapultthemes.com. He’s been working with WordPress since around 2008.

Discover more from our archives ↓

Popular articles ↓

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.