800,000+ WordPress sites are already using MetaSlider!

How to Create a Text and Image Carousel in WordPress

A MetaSlider user approached us this week and asked if it was possible to show a rotating series of images in a carousel. They wanted several images to be visible in the display at the same time, and for the images to refresh every few seconds. Yes, this certainly is possible with MetaSlider, and in this guide we’ll show you how it’s done. This image below gives you an idea of the end result.

Sample image carousel from WordPress

To get started with this tutorial, make sure you have the MetaSlider plugin installed.

  • Go to “MetaSlider” in your WordPress admin area.
  • Click the “Add Slide” button and add some images to start your slideshow.
Adding WordPress images in MetaSlider

Look in the right sidebar and choose the width of your slideshow. In this example, I’ve set both the width and the height to be 400px so my image displays will be square. If you do want multiple images to show at the same time, make sure the “Width” is narrower than your container – the space on the website where you want to place this carousel.

Changing the width of images in MetaSlider
  • In the “Advanced Settings” area, check the boxes for “100% width” and “Carousel mode”.
  • Click “Save”.
Changing settings in MetaSlider
  • Click the “Preview” button in the toolbar at the top of the screen.
  • You will now see your carousel in action. This is the first draft of your carousel and gives you an idea of what it will look like. When you’re ready, you can click the X in the top-right corner and make some changes.
A preview of a carousel in MetaSlider

Making adjustments to the slideshow carousel

Now that the basic features of the carousel are in place, you can make adjustments to match the original design.

One thing you can do is click “Enter manually” and enter a caption for your images.

Adding a caption to an image

Simply adding captions is enough to get them added to your carousel. Click “Preview” and this image shows what you will see.

Next, you may want to experiment with different themes.

  • In the right sidebar, look for the “Slideshow Theme” box and click “Select a custom theme”.
  • You can browse the various themes and find the best fit for your site. One suggestion that may be close to our initial design is the “Outline” theme:
Choosing a MetaSlider slideshow theme
  • Choose a new theme and then click the “Preview” button.
  • This image below shows the “Outline” theme on our carousel.
The Outline slideshow theme in MetSlider

This design is now close to our initial goal. We may need to add a little CSS to make the font larger, or modify the color of the Previous / Next arrows. You can add that CSS via your theme, or you can do that using the CSS Manager in MetaSlider Pro.


Making the Carousel Live on Your Site

When you’re ready, you can add MetaSlider to a post, page, or your site layout. MetaSlider works great with the Gutenberg editor and all leading page builders. In this next image, I’m adding MetaSlider to the new Full-Site Editing system in the WordPress core.

Adding a slideshow to WordPress Gutenberg

When I save the new MetaSlider block and the WordPress design, I can visit the front of the site and see the carousel in action.

A completed WordPress carousel


2 Replies to “How to Create a Text and Image Carousel in WordPress”

  1. July 5, 2022

    How do I add a link to the background image??

    1. Steve Burge
      July 5, 2022

      Hi Andy. Thanks for using MetaSlider. That’s possible in MetaSlider Pro with the “Layer Slide” feature: https://www.metaslider.com/layer-slides-metaslider/

Leave a Comment

Start Using Your Slider Today!

Create and publish WordPress slideshows in minutes… What are you waiting for?