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.
Fortunately, if you download the ZeGuten plugin, this problem will be solved. All ZeGuten blocks are responsive and include separate settings for different screen resolution.
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.
Bear in mind that 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. Let’s start creating an eye-catching element.
Add image slider to WordPress
Open the page where your responsive image slider for WordPress will be placed and start editing it with the Gutenberg editor.
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.
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.
Attune the responsive image carousel
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.
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.
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.
Turn on the Mobile view to compare how differently our carousel looks on desktop and mobile devices.