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 at the same time, with a caption over each image. Ideally, the images will automatically refresh every few seconds and there will be arrows if the user wants to move more quickly.
All of 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.
Table of Contents for this post
Sliders vs Carousels
A traditional slider displays one slide at a time. A carousel displays multiple slides simultaneously, allowing visitors to browse more content without clicking through every image.
Video Introduction to WordPress Carousels
If you want a video guide, here’s a YouTube tutorial to get you started. If you want the text and image version, keep reading further down the page:
Guide to WordPress Carousels
To get started with this tutorial, make sure you have the MetaSlider plugin installed.
This is possible with MetaSlider. In this guide, we’ll use the sample data provided with the MetaSlider plugin.
- Go to “Home” in your WordPress admin area.
- Click “New”.
- Click the “Add Slide” button and add some images to start your slideshow.
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.
- In the “Advanced Settings” area, check the box for “Carousel mode”.
- This will enable a new set of options for your carousel:
- 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.
It is possible to create a carousel slideshow with any type of slides. In the image below we have created a carousel slideshow with YouTube slides. You can create carousels with Vimeo slides, Layer slides, or anything else that’s available 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.
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. Here’s a list of all the available themes.
- Choose a new theme and then click the “Preview” button.
- This image below shows the “Outline” theme on our carousel.
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 Theme Editor 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. Click here for ways to add MetaSlider to your site. In this next image, I’m adding MetaSlider to the new Full-Site Editing system in the WordPress core.
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.
Carousels on Mobile Devices
MetaSlider is responsive, so the number of visible slides can automatically adjust based on screen size. Always preview your carousel on desktop, tablet, and mobile devices to ensure captions remain readable
WordPress Carousel Summary
Once you’re comfortable with image carousels, you can also create carousels using YouTube videos, Vimeo videos, blog posts, WooCommerce products, or custom HTML slides.
Image carousels are one of the most effective ways to showcase multiple pieces of content without overwhelming visitors. By combining images, captions, navigation controls, and responsive layouts, you can create engaging carousels that work well for portfolios, products, testimonials, blog posts, and many other types of content. MetaSlider makes the process simple, while still providing the flexibility needed to customize the appearance and behavior of your carousel.
If you’d like to explore more ways to use MetaSlider, check out our guides on how to create a carousel slideshow, build a carousel with a large hero image, learn more about using captions in MetaSlider, discover the different carousel options available in MetaSlider, and explore our complete collection of WordPress slider tutorials. These guides will help you create more engaging, responsive, and visually appealing slideshows for your WordPress website.
Get the best WordPress slideshow plugin
MetaSlider Slideshow is the best WordPress slider plugin.
You can show create stylish sliders using images, videos and more.
How do I add a link to the background image??
Hi Andy. Thanks for using MetaSlider. That’s possible in MetaSlider Pro with the “Layer Slide” feature: https://www.metaslider.com/layer-slides-metaslider/