How to Make a Responsive Image Carousel in WordPress? (Gutenberg & Elementor)

ABOUT THE AUTHOR

The girl who writes better than she talks. Web trends hunter, passionate traveler, Reese's lover.

How to Make Stylish Icon Lists Using Gutenberg Icon Blocks?
Prev post
  • Jun 11, 2021
  • 7 min read
  • 1,418

How to Make a Responsive Image Carousel in WordPress? (Gutenberg & Elementor)

Responsiveness is an important feature for every website. Not everyone checks surfing the web exceptionally using desktop devices. Sometimes we have only tablets or mobiles close at hand. And that is why your website should be adaptive to any type of device screen. The websites that have mobile versions are more popular than websites that can be displayed only on desktops. That is why it’s important to apply a responsive image carousel on the websites.

Building Image Carousels in WordPress

From this tutorial, you will learn about how to create a responsive image slider in WordPress and allow users to overview your photos from any device they want. 

In particular, we will teach you how to make image carousels using:

  • Gutenberg block editor (with such plugins as Getwid & ZeGuten)
  • Elementor page builder (with the Stratum plugin)

Let’s move on!

How to Add an Image Carousel to Gutenberg?

The default collection of Gutenberg blocks does not offer an option for setting up an image carousel. However, this is never an issue. With a variety of third-party plugins, you can add up a number of useful Gutenberg blocks on top of your default collection.

As a solution for the Gutenberg image carousel, we offer the next plugins:

Image Slider Block by Getwid

Getwid is a collection of 40+ static and dynamic blocks with extensive configuration settings, and 35+ unique pre-made block templates on top.

There are a lot of reasons to love Getwid, including:

  • 100% free use of premium-like Gutenberg blocks (including a block for image carousels);
  • it’s the largest collection of Gutenberg blocks (40+) in the free segment;
  • extensive customization attributes;
  • free design boilerplate for developers;
  • perfect interplay with default Gutenberg blocks.

To create a responsive image carousel with the Getwid plugin, consider using the Image Slider block. This block is universal for making both slideshows, sliders of different kinds (media & post), and certainly, image carousels.

Getwid Slider Block: Video Tutorial

  1. When Getwid is downloaded and activated in your dashboard, go to the wanted page of your WordPress website.
  2. Open the Getwid blocks list in the top right corner (the + button). Type in the “Image Slider” and add it to your page.
  3. Select the needed images from your existing gallery or upload the new ones from your computer. Insert.
  4. Click the pencil icon to edit the image gallery. This is where you may: 1) add captions to each image, 2) make the gallery full-width and wide-width:

On the right side, you will see general & advanced settings for the images, slider, and controls.

You can alter image sizes and their fit inside the slider. You may choose to show the image captions on the bottom of the slider or hide them. Also, you may include a link to an attachment page, media file, or even make a custom link per slider.

Styling-up the Slider Block by Getwid

The other settings are responsible for styling up your image carousel. You start by setting the appropriate slider height & slideshow speed, and end up choosing one of the 2 animation effects + the animation speed:

P.S. The full responsiveness of the Getwid plugin allows you to choose any slideshow height so that it looks the same on all devices.

And now we go on to the advanced settings of our block.

This is where you may choose how many slides are displayed at one time on different screens. You may switch the center mode, variable width, and even set spacing between slides (small, medium, large, or huge):

In the Control settings, you are able to change the positions of the slider dots and arrows (or hide them all).

Carousel Block by ZeGuten

The ZeGuten plugin provides users with responsive Gutenberg blocks, so each of them includes separate settings for different screen resolutions.

Using the ZeGuten carousel block you can create the carousel with any type of content inside whether it is text, media, or posts. But in our case, we are going to create an image carousel in Gutenberg editor:

  1. Open the page where your responsive image slider for WordPress will be placed and start editing it with the Gutenberg editor.
  2. When the editor has opened, click on the + button or type /carousel to add an image carousel in Gutenberg. Click on the appeared block to paste it to our working field:
responsive image carousel
  1. By default ZeGuten carousel block provides you with 3 items in general, 2 slides to show, and 1 slide to scroll. If you need more items you can change their number by clicking on the block and finding the General Settings tab in the right sidebar.

Furthermore, in this section, you can also enable or disable the arrow, dots, infinite loop, set autoplay, etc.

responsive image carousel

Styling-up the Carousel Block by ZeGuten

To start attuning our image slider according to different screen types click on the desktop, tablet, or mobile icons.

We can set a different number of slides to show on the different devices. We will choose 3 for desktop, 2 for tablet, and 1 for mobile:

responsive image carousel

Then we are going to change the content of each item. For this purpose, we will use the properly Item 1 Content, Item 2 Content, Item 3 Content tabs. There is an ability to add subtitle, title, and description texts for the header. In the item footer, you can enable a button. 

As we are going to create a responsive image carousel WordPress we don’t need the text. So, delete the simple text and leave these fields empty. Then change the background type from background color to image background.

Repeat these actions with every item:

responsive image carousel

When you have finished editing all your items, cross to the Style Settings tab to start stylizing the carousel according to your tastes.

Notice that above such fields as radius, indent, padding, size, margin, height, and width there are desktop, tablet, and mobile icons. Remember that you have the ability to apply different values for various screen types to achieve a better view of your carousel.

Then if you enabled the dots and arrows you can attune them in the proper Carousel Arrows and Carousel Dots tabs. 

In these sections, you can also change the options for different screens separately:

When you have finished stylizing your image carousel in Gutenberg click on the Publish link. Then check the result:

responsive image carousel

Turn on the Mobile view to compare how differently our carousel looks on desktop and mobile devices.

How to Add an Image Carousel to Elementor?

Being the most popular WP page builder, Elementor offers plenty of third-party solutions for such elements as an image carousel. Among dozens of widget collections, we would like to highlight Stratum.

Stratum for Elementor is a freemium plugin that offers 24+ most essential business-related widgets. The addon does not separate widgets into “free” and “paid” ones. Instead, it lets you use all widgets for free with just a few extra functionalities available in the premium version.

To create an image carousel in Stratum, you should use the Advanced Slider widget.

Read about the Advanced Slider Elementor widget by Stratum down the link.

After installation of the Stratum plugin, go to the dashboard and drag-and-drop the Advanced Slider widget from the left sidebar.

As you may already see, this widget offers so many different forms of customization. Each image goes with a bunch of settings for each slider: title, description, button, URL, and more. Remove this content for an image carousel:

Next comes the layout options. Here you may set the number of displayed columns, rows, sliders to scroll and choose the needed slider direction.

On top of that, you will be able to switch on:

  • dynamic bullets
  • keyword control
  • mouse wheel control
  • free move mode

Arrows and bullets made for navigation can be carefully placed however you need them to (size, spacing, offset).

The final part is the styling options for both image, title, description, buttons, and subtitles. This is where you may set the animation effects for the text, color overlay for the image, and more.

Conclusion

Hope you could choose the best option for setting up the image carousel in WordPress!

2
Appreciate
Full-Page Video Background In Gutenberg: Which WordPress Blocks To Use?
Next post
How to Make Stylish Icon Lists Using Gutenberg Icon Blocks?
Prev post
Full-Page Video Background In Gutenberg: Which WordPress Blocks To Use?
Next post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Subscribe to get the news from Gutenix! Be the first to know of updates & discounts!
Enter a valid email!
Server error. Please, try again later!
Form was successfuly submited!
Follow Us:
Copyright © 2021 Gutenix. All Rights Reserved.