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.
Fortunately, if you download 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 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 responsive image carousel to WordPress
Open the page where your responsive image slider for WordPress will be placed and start editing it with 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.
To start attuning our responsive image slider wordpress 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. Here there is an ability to add subtitle, title, and description texts for the header and middle parts of your item. 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 at the top of the page and check the result.
Turn on the Mobile view to compare how differently our carousel looks on desktop and mobile devices.