Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create a WordPress Image Carousel (2 Easy Ways)

How to Create a WordPress Image Carousel (3 Easy Ways) 

Written By: author avatar Stacey Corrin
author avatar Stacey Corrin
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.
    
Reviewed By: reviewer avatar Turner John
reviewer avatar Turner John
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

TL;DR: How to Create a WordPress Image Carousel

WordPress gives you multiple ways to add an image carousel, depending on what you’re building and which plugins you already use.

  1. SeedProd – Drag the Image Carousel block onto any custom page, upload images, and set autoplay speed in about 5 minutes
  2. Jetpack – Enable full-screen gallery carousels in WordPress posts and pages for free
  3. No plugin (Gutenberg) – Use the native Gallery block with custom CSS for a basic carousel effect
  4. WooCommerce – Add a product image slider to any product page with the free Product Gallery Slider plugin

Most WordPress carousel plugins look impressive in demos but take forever to configure, and the popular ones are notorious for adding page weight.

Whether you’re building a portfolio, a WooCommerce store, or a landing page, there’s a WordPress image carousel method built for your setup. I’ll show you the three fastest options.

The fastest way is SeedProd’s Image Carousel block. Drag it onto any page, upload your images, and set autoplay speed in about 5 minutes.

For WordPress posts, Jetpack adds a free slideshow feature. WooCommerce product pages can use the free Product Gallery Slider plugin.

How to Create Image Carousels for Custom WordPress Pages

SeedProd Drag-and-drop WordPress website builder

SeedProd is the best WordPress website builder, with over 1 million users. It includes a built-in WordPress carousel plugin that makes it easy to add image sliders without code. With its drag-and-drop website builder, you can add multiple image carousels and sliders to any page of your site without coding.

With this in mind, let’s look at how to add an image carousel to your website using SeedProd.

Step 1: Install and Activate the SeedProd Plugin

The first step is to download a copy of the SeedProd plugin. While SeedProd has a free version for creating simple landing pages, we’ll use the Pro version to access all of the advanced features.

Next, upload, install, and activate the plugin on your WordPress website. If you need help with this, follow these instructions for installing a WordPress plugin.

After activating the plugin, head to SeedProd » Settings, where you can enter your SeedProd license key. You can find your license key in your SeedProd account area in the Downloads section.

Enter and verify SeedProd license key

Step 2: Create a WordPress Landing Page

The next step is to navigate to SeedProd » Pages to create a new landing page.

Choose a landing page mode in SeedProd

At the top of this page are 4 different page modes you can activate with a single click, including:

  • Coming soonEnable a coming soon page to tell visitors (and Google) about your new website.
  • Maintenance mode – Let visitors know you’re temporarily down for maintenance.
  • Login – Activate and create a custom WordPress login page.
  • 404 – Enable a custom 404 error page on your WordPress site.

Under the page mode section, you’ll see any landing page you create with the SeedProd plugin. You can make as many custom WordPress pages as you like.

Create a new landing page with SeedProd

Click the Create New Landing Page button to make a new page. Doing so shows SeedProd’s library of responsive landing page templates.

SeedProd responsive landing page templates

You can choose any landing page design you like, but we suggest picking a template that is close to how you want your page to look. That way, you won’t need to make too many changes.

For this post, I used the Travel Webinar Page template, which you can find by clicking the Webinar tab at the top of the screen.

To choose this template, hover your mouse over the thumbnail and click the orange tick icon.

Import SeedProd landing page template

Next, you’ll see a popup where you can add a page name. The page name won’t appear on your landing page design, but it does set your page’s URL. So, choose a name that makes sense to your visitors when they visit your page.

Start editing your SeedProd landing page

Now click the Save and Start Editing the Page button.

Step 3: Customize Your Landing Page Content

SeedProd website builder interface

Once the template loads, you’ll see SeedProd’s drag-and-drop website builder. Skip ahead to Step 4 to add the carousel.

Unlike standalone carousel plugins, SeedProd’s Image Carousel block is built directly into the website builder. No separate plugin to install, and no extra JavaScript loading on your page.

But the reason why you’re here is to add a carousel to your page easily. To do this, you can use SeedProd’s Image Carousel block.

For this example, you’ll replace the main hero image with a sliding carousel. So first, hover over the existing image and click the trashcan icon to remove it.

Remove a default image block in SeedProd

Next, select the Image Carousel block from the Advanced Blocks panel and drag it onto your page.

Add SeedProd image carousel block

You can click the block on your page to see the carousel settings. For example, clicking the Image 1 section shows an option to use your own image from your computer or media library or choose a royalty-free stock image.

Add images to SeedProd carousel slider

After adding an image to the carousel, you can enter an image caption and click the Add Images button to insert more photos into your carousel slider.

To ensure your carousel looks great on any device, SeedProd automatically adjusts your images for desktops, tablets, and smartphones.

In the Carousel Settings panel, you can adjust your image slider more. For example, you can:

  • Choose a dark or light navigation color
  • Choose to autoplay your carousel gallery
  • Select the autoplay speed in seconds
  • Show or hide image captions
  • Select the gallery alignment
Customize image carousel settings

If that isn’t enough, you can click the Templates tab to change your gallery image style with fewer clicks. For instance, I chose a style with an image drop-shadow.

Choose a style for your image carousel

In the Advanced tab, you can customize the caption typography, borders, and spacing and pick colors and styles that fit your brand.

When you’re happy with the look of your landing page carousel, click the green Save button at the top-right corner of your screen.

Save your SeedProd landing page

Step 5: Configure Your Landing Page Settings

Click Page Settings to give your page a name and set it to publish.

Step 6: Publish Your Image Carousel Page

Before you publish your landing page, preview it on mobile to ensure your design looks good for mobile users. Otherwise, it can hurt their user experience.

To see a preview of your page, click the Mobile Preview icon at the bottom of your screen.

Mobile preview of SeedProd landing page

You can then view your page as it would look to anyone browsing from a mobile device and make changes with the visual editor.

You can also quickly move between desktop and mobile text elements in any block with typography settings. This allows you to make changes to either your mobile or desktop page without switching view mode.

Adjust mobile design settings in SeedProd

When you’re happy with both your mobile and desktop landing page versions, click the dropdown arrow on the green save button and select Publish.

Publish WordPress landing page with image carousel

Then, you can click the See Live Page button on the following screen to preview your landing page.

Here’s how my image carousel looks on my test website:

Example WordPress image carousel on a live page

Your page is now live, complete with a fully responsive WordPress image carousel to showcase multiple images at once.

How to Add Image Carousels to WordPress Posts

I often recommend Jetpack for beginners because it’s easy to use and comes with a built-in image slider for WordPress posts and pages.

Jetpack is a free plugin that adds a ton of useful features to your WordPress site.

Jetpack plugin for WordPress

For instance, it can scan your site for security issues and offer brute-force protection from bots and hackers. You can also use it to lazy load images, share content on social media, and more.

More importantly, Jetpack has a feature that allows you to show full-screen carousel galleries in both posts and pages. This feature works perfectly with the block editor (Gutenberg editor), making it simple to add carousels directly to your posts and pages.

Keep reading to find out how to use Jetpack’s free WordPress image carousel feature.

Step 1: Install and Activate the Jetpack Plugin

The first step is to install and activate Jetpack. To do this, go to your WordPress admin area and click Plugins » Add New.

From there, scroll down until you see the Jetpack plugin, and click Install Now, then Activate.

Install Jetpack plugin from WordPress dashboard

The next step is to go to Jetpack » Settings from the left-hand navigation panel and click the Writing tab.

At the top of the following screen, you’ll see the Media panel. In this area, click the Display images in a full-screen carousel gallery toggle to the on position.

Turn on Jetpack full-screen carousel galleries

You can also choose to:

  • Show photo Exif metadata in the carousel
  • Show the comments area in the carousel

And pick a white or black color scheme.

Make sure you click the Save Changes button before moving on.

Step 3: Add a Slideshow to Your WordPress Post or Pages

Now, you’re ready to create an image carousel in any WordPress post or page for free.

Add Jetpack slideshow block in post editor

To easily add a carousel to a WordPress post, create a new post, or edit an existing post. Then click the plus icon inside the block editor to add a new WordPress block, and click the Slideshow block to add it to your post.

Upload images for Jetpack slideshow gallery

Then, you can click the Upload button to start uploading images to your gallery from your computer. Or you can click the Media Library button to insert images that are already in your WordPress media library.

Now, choose which images you want to add and click the Create New Gallery button.

Select images for Jetpack image carousel

On the next screen, you can add captions to your photos to explain what each image is about. Then, just click the Insert Gallery button to add it to your post.

Insert Jetpack image gallery into a post

You should now see a preview of your image carousel in your WordPress post. It will have arrows that allow you to navigate between photos and pagination dots that show the number of images in the gallery.

Preview Jetpack image carousel in WordPress editor

In the slideshow settings panel on the right, you can captivate your audience with transition effects. A range of animations allow you to slide or fade between images, creating a dynamic visual experience that engages your visitors.

You can also change the image size, autoplay the slides, and delay transitions.

Customize Jetpack image carousel options

When you’re happy with how your image carousel looks, click the Publish or Update button. Now, you can preview your post to see your image carousel gallery in action.

View live Jetpack carousel on a post

How to Create WooCommerce Product Image Carousels

If you have an online that uses WooCommerce, you can easily display product photos in an attractive image slider. For this, I’ll use the free Product Gallery Slider WordPress plugin.

After installing and activating the plugin, navigate to Codeixer » Product Gallery from your WordPress dashboard. Here, you can choose your slider type, dimensions, navigation options, styling, and more.

WooCommerce product image slider settings

Next, go to the product page where you want to add the image carousel. In right-hand sidebar, you’ll see a new panel called Product Gallery.

Upload WooCommerce product carousel images

This is where you’ll add the images for your product carousel. Simply click Add Images to select images from your Media Library, or drag and drop them from your computer.

From there, go ahead and update the product, and that’s it. Now, you can view the page and see your WooCommerce image carousel in action.

WooCommerce product image carousel on product page

This plugin is one of the simplest ways to add an image slider to your WordPress product pages. For a full product gallery with lightbox support, see our guide on creating a WooCommerce product image gallery.

More Questions About WordPress Image Carousels

How do I add a carousel to WordPress without a plugin?

WordPress’s native Gallery block lets you add multiple images in one place, and our guide on adding a gallery to WordPress pages covers the steps. For a full carousel with autoplay and navigation controls, SeedProd’s Image Carousel block is the better choice, with no separate plugin required.

What is the difference between a WordPress image slider and carousel?

A slider shows one image at a time in a full-width display area. A carousel shows multiple images side by side that users can scroll through. Sliders work well for hero sections and focused messages. Carousels are better for product galleries, portfolios, and collections where you want to show several items at once.

What is the best size for a WordPress image carousel?

The most common size is 1200×600 pixels, which balances image quality and load speed. If your carousel spans the full page width, go up to 1600px wide. Keep all images in your carousel the same dimensions so they don’t shift or crop when cycling through the gallery.

Does SeedProd have a free carousel feature?

SeedProd’s Image Carousel block is available on paid plans. The free version of SeedProd doesn’t include the Image Carousel block. If you need a free option, Jetpack adds carousel functionality to WordPress posts and pages at no cost.

What causes image carousels to slow down a WordPress site?

The most common cause is oversized images. Uploading 3000px-wide images when your carousel displays at 800px forces WordPress to load far more data than needed. Carousel plugins that load JavaScript and CSS on every page, even pages with no carousel, also add unnecessary weight. SeedProd’s Image Carousel block only loads on pages where you use it.

Next, More WordPress Image Tips

Creating a WordPress image carousel doesn’t require code or a developer. SeedProd’s Image Carousel block handles it in minutes.

You might also like the following guides to improve your WordPress images:

Thanks for reading! We’d love to hear your thoughts, so please feel free to join the conversation on YouTubeX and Facebook for more helpful advice and content to grow your business.

author avatar
Stacey Corrin Content Marketing Specialist
Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.