Show Off Your Best Images with the New WordPress Image Carousel Gallery

Author
David Lindop   81

We slipped a little something extra into the Thrive Visual Editor last week. Did you notice?

A real wow-factor feature that will help you impress your visitors.

That’s right, we’ve added a new Image Carousel that you can start using to showcase your stunning images immediately!

If a picture speaks a thousand words, imagine how much more you can communicate with a professional, fully customizable Image Carousel gallery.

Here’s what you need to know...

More...

Introducing the new Thrive Image Carousel

New feature announcements are some of our most popular posts here on the Thrive Themes blog. We normally bundle lots of new features together into an epic post, like this one, or this one.

You guys seem to love it when we add more and more tools to Thrive Suite.

This month however, we’re focusing on delivering massive improvements to Thrive Apprentice, Project Light Speed, and a super-secret and super-amazing update to Thrive Theme Builder.

Yet even with all this happening, we still managed to squeeze out one more great feature that’s been requested time and time again...

Craig B

Craig B

"Would way rather have a Thrive [carousel] – a nice simple crossfade transition and some simple cuts would go a long way to giving us tools that would be great."

Andras P

Andras P

"Please please please add an image carousel element."

Feng Yin Tseng

Feng Yin Tseng

"Would like to know if I can uninstall FooBox as well?"

(Yes you can, Feng Yin!)

Adrian Iacob

"I ask you if you can feature a photo slider or carousel…"

You’ll find the new Image Carousel right now in the Thrive Visual Editor.

Simply drop an Image Gallery element into the canvas, and look for this brand new Gallery type...

Choosing a gallery type for your WordPress Image Gallery

As a quick recap, here are the 4 Gallery types you can choose from:

  1. Grid - Images are cropped to the same dimensions.
  2. Horizontal Masonry - Images are cropped to the same height.
  3. Vertical Masonry - Images are cropped to the same width.
  4. [NEW!] Carousel - An interactive, sliding gallery with tons of customization options!

And here’s the new Image Carousel in action...

Go on, click through using the arrows, the dots, or even by swiping to the side.

The new Image Carousel is visually stunning, intuitive to use, and endlessly customizable.

In fact, what you see above is only one of many possible configurations possible. You’ll discover the exciting customization options later in this post – but first, let’s explore the why, when and how you’ll want to use the Image Carousel to maximum effect on your website.

What is an Image Carousel?

The new Image Carousel lets you showcase a collection of images in a stylish, interactive way. As you can see from the example above, it lets your visitors follow along a sequence of your best images, set in the order you choose.

Image Carousels are perfect for photography, art, comics, event coverage, and visual project showcases like architecture, fashion and modelling.

Whenever you have a collection of visually stunning images to show off on your WordPress website, the new Image Carousel is there to help.

The Image Carousel gallery type is designed to showcase image content wherever you use the Thrive Visual Editor. It’s perfect for landing pages, your homepage, and blog posts designed in Thrive Architect etc.

It’s not suitable for adding to your theme templates using Thrive Theme Builder, unless you really want the same image gallery featured across multiple pages.

Is it the same as a slider?

I’ve deliberately avoided using the word slider until now, because it’s a web design term that comes with a lot of baggage. Traditionally speaking, sliders are elements that cycle through images, text and calls-to-action, often to maximise above-the-fold screen space.

Companies like sliders because they feel like they’re adding more information to their homepage, and that animation makes their website more professional. Visitors hate them because they obscure information, distract from actual content, and change mid-sentence. We have strong feelings about sliders too.

So let’s be clear here...

The new Image Carousel is for showcasing images only.

It’s not designed for overlayed calls-to-action, dynamic eCommerce product listings, your latest special offers, or anything else. These are not sliding banners. Just images.

Embrace this, and you’ll love the new Image Carousel!

When Should You Use an Image Carousel?

Image Carousels are great to use:

When you have 4 or more images to showcase.

Can you make an Image Carousel with only 3 images? Sure you can. But does it benefit your visitors more than just displaying the images on the page? Probably not.

When you have stunning photographs to showcase.

Image Carousels are all about giving undivided focus to each image in turn. If you have a gallery of gorgeous photos that each deserve a chance to shine, then this gallery type is for you.

When you want to tell a story

Image Carousel galleries show a sequence of images. You choose the order in which the images are displayed, and in doing so, you also craft the story you tell.

This is perfect for emotional transformations, comics, storyboarding, or even just the progression of an event like a wedding or a sports contest.

...and when should you NOT use a carousel?

Just like all tools available in Thrive Suite, the Image Carousel isn’t suitable for every occasion. We recommend considering a different design tool for the following situations...

When you have too few - or too many - images.

If you have just a few images, ask yourself if they’ll be better received by just displaying them on the page without the bells and whistles of an image gallery.

If you have oodles of images, be aware that the Image Carousel requires your visitors to cycle through each one sequentially. At 10+ images, you’ll probably find one of the other Image Gallery types will be more suitable.

When sampling is more important than sequence

If you want your visitors to choose which images to view – pick-and-mix style – then choose a grid or masonry gallery type. If the sequence or order is important, then choose the Image Carousel.

OK, enough chit-chat. Let’s take this new feature for a spin!

Let’s Build a Carousel Gallery

I want to show you how quick and easy it is to create 2 different styles of Image Carousels that could work for your website.

Follow these steps after reading this article and see what you can create.

Image Carousel 1: An eye-catching visual upgrade to a larger element

Carousels don’t have to be feature elements – they can be sub-elements of other great designs.

Take a look at this call-to-action for a photography competition. It has all the standard features of a CTA plus the added improvement of an autoplaying, vibrant collection of images.

It catches the eye and communicates a feeling that standard text simply can’t.

2021 Youth Photo Competition

Get ready to showcase your best photograph of the year for a chance to win one of 5 Panasonic Lumix DC-G100K cameras!

2020 Winners

How to make this Image Carousel

  1. Add a Columns element and set it to show 2 columns, vertical position: middle.
  2. Set the Background Style of the left column to grey.
  3. Add some Text elements and a Button element. Style to match your tastes.
  4. Add an Image Gallery element to the right column with the following settings:
    1. Gallery Type: Carousel
    2. Crop images to fit: Yes
    3. Single image fader: Yes
    4. Infinite sliding: Yes
    5. Autoplay: Yes
  5. Add a Content Box element above the carousel, styled to match your tastes, and give it a negative bottom margin to create a smart, overlapping label.

Image Carousel 2: A gorgeous full-size feature Image Carousel

This example is a more traditional – but no less impressive! – Image Carousel gallery.

Each image is featured in a distraction-free setting, and the visitor is free to navigate through the gallery at their own pace. No autoplay here.

Here I’ve added dots to give a visual clue to how many images are included, and captions to provide additional information to the reader.

How to make this Image Carousel

  1. Add an Image Gallery and choose your images.
    1. Gallery Type: Carousel
    2. Crop images to fit: Yes
    3. Columns: 1
    4. Overlap end images: No
    5. Show Arrows: Yes
    6. Show Dots: Yes
    7. Infinite sliding: Yes
    8. Autoplay: No
  2. Increase the Image Height slider until it looks great.
  3. Customize the dots and arrows if you like.
  4. Click the Edit Design button, select each image in turn, and drag it to achieve the best framing for the crop. When you’re done, click the Done button.

Let’s Explore the Customization Options

The Image Carousel features a huge amount of options for customizing it to fit your website and brand.

Once you’ve loaded a collection of your best images into an Image Carousel, you’ll feel like a kid in a toy shop with so many things to play with!

Let’s run through some of the most important features that you’ll want to familiarize yourself with...

Reordering Images

One of the big strengths of an Image Carousel over other gallery types, is that the order of images can be carefully crafted to communicate a story or emotional journey.

You can easily rearrange the image order at any time, to tell the perfect story to your visitors. It’s as easy as dragging them into the right place:

Reordering images in the image carousel

Simple drag and drop the images into the right order for your WordPress Image Carousel

Image Captions

The Carousel element supports image captions, so you can add a little context to help the reader understand what they’re looking at. Image captions are also the perfect place to add source citations, such as Creative Commons attribution if required.

Not only can you toggle image captions on and off, but you can also fully customize them to look professional and match your brand.

Image captions can be either:

  • Added within the WordPress gallery editor, in which case the captions will be associated globally with a specific image.
  • Added within the Thrive Visual Editor, in which case the captions will be associated only with a single Image Carousel gallery.

This gives you the flexibility to use the same image caption wherever an image is shown on your website, or override this with a custom caption specifically for your Image Carousel.

Customizing the look of your image captions is easy too: just choose the alignment, styling, font, border, shadow, and much more.

Styled WordPress Image Carousel Captions

Arrows and Overlapping End Images

The new Image Carousel comes with fully customizable previous and next buttons to navigate your gallery.

By default, they look like this:

Standard image carousel arrows

... but of course, you’re free to change the arrow color, icon, style and size, until they fit your brand and personality.

Maybe something like this:

Styled Image Carousel arrows

But wait, there’s more!

Maybe you don’t want arrows. Maybe you want to show a preview of the neighboring images in the sequence.

No problem! Just enable the ‘Overlap end images’ option like this:

Overlapping end images on the WordPress image carousel

Overlapped end images give a visual cue that the gallery images can be dragged to move through the sequence.

Dots

These handy pagination ‘dots’ help visitors to see exactly how many images are featured in your Image Carousel. What’s more, by clicking them, your visitors can instantly jump to specific images.

Navigation dots make it easy to cycle through the image carousel

We call them dots because that’s the default look, but they can be any icon you like.

And any color. And any size.

And with any margins, background, borders, shadows, hover effects and more!

If you’ve been with Thrive for any amount of time, you’ll know that if something can be customized, tweaked or personalized, chances are you can do it with the tools in Thrive Suite.

Advanced Image Carousel Behavior

Before you run off to play with your new Image Carousel, I want to share some advanced behavior and customization options that will help you get the most from it.

Choose how many slides to scroll

You can choose how many slides to scroll through with each press of the arrows.

Choosing how many slides to scroll with each click of the carousel arrows

This setting is designed to cycle through multiple images with each press of the navigation arrows.

It doesn’t make much sense to skip images when only one large image is displayed at a time, but it’s a great option if you choose to feature a few images at a time, like this 3-column Image Carousel.

Multiple column image carousel

To Autoplay or not, that is the question

Love it or hate it, we’ve given you the power – nay, the responsibility! – to choose whether to automatically cycle through your image collection.

I recommend against enabling Autoplay by default, unless you have a compelling reason to take control away from your visitors. However, some use cases can benefit from automatic image transitions, so feel free to experiment!

Toggling the Autoplay option does let you set the transition speed, and choose to pause the animation on image focus or hover.

Image carousel autoplay options

The default Autoplay options are already dialled in for most scenarios, but feel free to experiment.

Image cropping

The cropping option allows you to maintain a fixed image aspect, regardless of the original dimensions. It’s much easier to understand just by comparing the examples below.

Without image cropping...

Without cropping, the carousel features differently sized images.

With image cropping...

WordPress image carousel cropping

Don’t stress about which parts of the image are cut off by the cropping – you can easily re-center the important parts for each image so your viewers don’t miss the action.

Professional image effects

Ever wanted sepia tone images?

Or a subtle colored overlay?

Maybe a little opacity?

All the great instance image effects that are available on normal images can now be applied to your Image Carousel. And while that’s kinda cool, what’s even more impressive is combining image effects with hover states!

The classic image gallery hover effect is to show black and white images that magically spring to technicolor life when the visitor hovers their mouse over them.

Image carousel hover image effects

Use this black and white to full color effect to create a professional Image Carousel.

You can do this right now on your website, by following the steps in this tutorial guide.

Set a link URL for each image

This is a neat little feature. Each image can be independently linked to a different destination URL.

Why?

Let’s say you’re selling a visually emotive product or service... like jewellery, fashion, custom furniture, yoga training, or fitness coaching. Something that you can communicate via imagery.

You could use the new Image Carousel to showcase your products, and link each one to a relevant lead generation or sales page.

To add a link, you’ll need to first click the image, and click the “Edit Design” button. Then toggle the “Add link to image” option, and the familiar link options will appear below.

Adding links to Image Carousel images

Each image can be linked independently, giving you full control over your Image Carousel.

What Do You Think of the New Image Carousel?

I can already hear the cogs turning as you think about ways the new Image Carousel can be used on your website. I can’t wait to see what you come up with.

If you don’t yet use Thrive Suite, now is the perfect time to join us and build your website using tools just like the one in this blog post. Thrive Suite includes everything you need to start your WordPress-based online business.

 Drop us a comment below and share your thoughts, ideas and questions.

by David Lindop  April 26, 2021

81

Enjoyed this article ?

You might also like: