All You Need to Know About WordPress Carousels

Carousels, sliders, galleries, people often get confused about them.

And designers still seem not to agree on their definition.

So, here are the definitions I feel comfortable with:

• A slider is any web element that rotates through. It can contain images, videos, images, and text, etc. They can be managed manually by the user, or set on autoplay, like the one below. Many times people use “slideshow” instead of “slider”.Source: Lonely Planet

• Carousels are a type of slider that does not show entire large images at a time, but multiple ones in a row. Some web designers say the carousels and sliders are one and the same. When using WordPress, you will see them treated differently. Both sliders and carousels make use of visual cues in order to show the user that they can move left-right and uncover new images, etc.

• A gallery is a collection of images or videos presented in grids.Source: booking.com

So is your head spinning right now? Or is everything clear? I know it can look messy.

Now let’s see how you can create a WordPress carousel. Carousels are not a built-in WordPress feature, this is why we’ll need some other tools to help us out. Now, I’ve got three such tools that I’ll exemplify right away.

 

How to create WordPress carousels using WordPress plugins

If you want to use WordPress plugins, here’s how you can install them:

When choosing your plugin make sure to check:

• Reviews and popularity;
• If it has the features you need;
• Go to the plugin’s website and check the demos;
• Start a free trial if possible.
• Mobile responsiveness.

Now, you should be aware that most of the time these plugins might use the term slider instead of carousel. You can ask their support team if they support carousels while defining what a carousel means to you.

Next, I’m going to make a list for you of the most popular WordPress carousel plugins out there. After that, I’m going to show you a demo using one of the plugins. Let’s get going. 

 

• NextGEN GallerySource

Here you have the most popular features for the NextGEN WordPress plugin.

• Choose from 20+ gorgeous gallery styles.
• Multiple Upload Options (Image, Zip, Folder Import).
• Rotate Images and Custom Crop Thumbnails.
• Retina images.
• A wide array of options for controlling size, style, timing, transitions, controls, lightbox effects, and more

Pricing: starting at $24/year.

Free plan available: yes.

 

• ModulaSource

Let’s look at some of the most appreciated features of Modula:

• Drag & drop builder.
• Create galleries faster by starting from the saved options preset. Change settings in bulk for your galleries.
• Create the ultimate gallery experience by adding videos from YouTube, Vimeo, or self-hosted to your image galleries.
• Mobile responsiveness.
• Adds zoom functionality to images, when opened in the lightbox. 
• Shortcode functionality.
• Lots of presets available.
• Compatible with most of the most popular page builders.

Pricing: starting $39/year.

Free plan available: yes.

 

• FooGallerySource

Here are the FooGallery most popular features:

• Drag and drop builder.
• Customizable templates.
• Multi-level filtering.
• Mobile-responsiveness.
• Gutenberg-ready.

Pricing: starting at $19.99/year.

Free plan available: yes.

 

• Envira Photo Gallery

Source

Here are Envira’s most popular features:

• Drag & drop builder.
• Pre-built templates.
• WooCommerce integration.
• Slideshow and fullscreen options.
• Mobile-ready.
• SEO-friendly.

Pricing: starting at $29/year.

Free plan available: yes.

 

• Slider, Gallery, and Carousel by MetaSliderSource

Here are MetaSlider’s most popular features:

• Drag & drop builder.
• Gutenberg-ready.
• Slider configuration: transition effect, speed, timing, plus many more.
• Create completely customized HTML slides using the inline editor. 
• There are over 50 built-in CSS3 transitions available.
• MetaSlider carousels are compatible with all slide types: image, photo, video (YouTube/Vimeo), layer, HTML, product, and post-feed slides.

Pricing: starting at $39/year.

Free plan available: yes.

 

Now, most of the galleries out there have the slider option included in their paid plan. This is why for my demo I chose MetaSlider.

After activating the plugin, you will see MetaSlider showing up in your WordPress dashboard, on the left.

To create your first slideshow you have two options: dropping images or creating a blank slideshow.

I’m gonna go with the first option.

After the upload, I will be guided towards the “Add Slide” option.

Now,  I don’t quite understand why I directed once again to the Media Library, because I have already uploaded my images.

After the image selection, go to the button-right and add them to the slideshow.

Now, it’s time to preview the slideshow.

 

If you want to create a new slideshow, just head over to new.

Whenever you go to the MetaSlider menu on the left, you’ll be seeing all your previously-created slideshows.

When you select your slideshow, you’ll see all your images  (aka slides). Now, you can make some extra edits to the images in your slideshow: cropping, scheduling, SEO optimizations, captions, attaching an URL.

On the right, you’ll see a panel with some extra settings.

You can choose the width and height of the slider, but also set up effects.

There are also some custom themes that you can choose from.

In the advanced settings, you can tick an option if you want your slideshow to behave like a carousel.

Here you can play with hovering effects, autoplay, CSS classes, alignment, and more.

On the right, there’s also a section named “How to use”.

Here you will find a tiny piece of code (aka shortcode) that you can copy and place inside any post or page you want. This is how you can go live with your WordPress carousel. It’s that easy!

 

How to create WordPress carousels using Gutenberg blocks

Now, let’s say you are using the Default WordPress Editor (aka Gutenberg). It looks like below. For every element that you want to insert on your page, you will need a block: heading, paragraph, image, table, quote, etc. You can do this from the “+” sign in the upper-left corner.

Now, there are no carousel or slider blocks available. Right now, the only default block is for galleries. But, you can add such blocks with the help of….WordPress plugins.

I’ve already mentioned in the previous chapter that some of the plugins there are Gutenberg-ready. This means that you can find their blocks available in the editor.

Here’s the MetaSlider block, for example:

When you select the MetaSlider block, this is how it will look inside your page or post.

In the previous chapter, I made a little demo on how to use MetaSlider to create your first WordPress carousel. After creating it, you can select it from the block. I named mine “First Slideshow” and “Second Slideshow”. Not very creative, I know. And that’s it!

The whole process is pretty straightforward.

Now, let me show you a special use of WordPress carousels: creating carousel slideshows dynamically sourced from the posts, pages, or custom post types of your website. You can use it to display product carousels as well for your WooCommerce store.

This is a common practice used on blogs when you want to suggest some new content to your visitors.

And there’s a cool WordPress plugin that can help you with this, and it’s blocks all-in, so to speak.

Introducing Getwid Blocks: Post Carousel Gutenberg Block.

Here’s how such a carousel can look like.

 

How to create WordPress carousels using WordPress page builders

For the purpose of this exercise, we are using the multipurpose Colibri PRO WordPress theme and the Colibri page builder. Why am I using a WordPress website builder? Because it gives me drag and drop functionalities and the design experience is really seamless. 

The Colibri builder has built-in carousel components.

Now, the moment you install the Colibri theme, you will be prompted with an upgrade message so that you can fully experience the theme. During the upgrade you’ll install the Colibri page builder. 

When you will head over to a page for editing, when you’ll hover over it you’ll see the “Edit in Colibri” option. This is where all the magic will happen.

When inside the page, go in the upper-left corner, and click on the “+” sign.

Now, head over to “Components” and select the “Carousel” option.

Simply drag it to your desired location on the page.

In my case, this is how it will look like:

When you select the carousel, you’ll see a bunch of editing options on the left. They are split into content, style, and advanced.

 

Here you can adjust the overall carousel look, as well as each individual carousel item.

There are so many possibilities here: from adding text, uploading images and videos, to arrow and dots styling, and spacing, borders, shadows.

All you need is inspiration. The tool is pretty intuitive.

Don’t forget to hit “Publish” when done.

 

This being said, it’s time to choose your weapon and create your WordPress carousel today! 

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

[sibwp_form id=1]