How to Create a WordPress Post Carousel Using Gutenberg Blocks?

ABOUT THE AUTHOR

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

10 Best WordPress Appointment Templates in 2021
Prew post
  • Jan 27, 2021
  • 6 min read
  • 1,688

How to Create a WordPress Post Carousel Using Gutenberg Blocks?

The scope of application for a WordPress post carousel is quite extensive: from displaying content of your blog articles to showcasing WooCommerce products, hotel rooms, and other categorized content elements.

In the next tutorial, we will teach you how to create professionally-looking posts carousels with a help of two Gutenberg block plugins:

Both plugins allow you to create WordPress carousels with not only posts but ANY type of content inside. Yet, our main focus will remain on building a carousel for posts only.

How to Build Post Carousels in Gutenberg? 

Posts Carousel Block by Getwid

The Getwid plugin lets you access 40+ dynamic and static Gutenberg blocks, as well as 35+ ready-to-go block templates. So far, Getwid is the largest collection of content blocks in the free segment with a focus on their multipurposeness and seamless interplay with the core Gutenberg blocks.

The most demanded Getwid blocks are:

The Post Carousel WordPress block by Getwid allows you to build custom layouts for each carousel slider. Just like any other block from the plugin’s collection, this content module is 100% compatible with all Gutenberg starter skins from the Gutenix collection (e.g. Robinson, Profitence, Fixis, Construction, etc).

Let’s find out how to add the Post Carousel block to your WordPress website and customize it in the Gutenberg editor.

How to Add the Post Carousel Block by Getwid?

As an illustrative example, I chose Fixis – one of the Gutenix PRO skins with ready-to-go page designs:

Getwid WordPress Post Carousel

Not every user check websites exceptionally from desktop devices. Often it happens that we have only mobiles or tablets close at hand. That is why all websites should look amazing both on each type of device. Fortunately, if you have installed the ZeGuten plugin, all your blocks can be attuned accordingly to the screen resolution. This will be your post carousel plugin WordPress

First, you’ll have to go to the need page and click on the + button (either at the top left or anywhere between any other blocks on the page). After typing “Posts Carousel”, you will see the needed block located in the group of other Getwid blocks. Click to paste the block.

In the given block, you can configure the layout width, and choose between wide or full-width:

Content & Display Settings

In the Content Settings, select which of the content you’d like to display in the WordPress post slider carousel.

By default, you may choose between Posts and Pages. Additionally, there might be custom post types, in particular, navigation menu items, contact forms, etc:

Now you may set the number of items (posts) to be displayed in the carousel, plus the number of posts to pass over (the first posts you would like to hide in the feed).

Just below the range slider bars, there are Sorting & Filtering options for a more advanced selection of items. You can display posts in a usual or reversed order, as well as by:

  • Title
  • Date
  • Random
  • Author
  • Last Modified Date
  • Menu order

Additionally, you may choose to display specific posts only (by entering their IDs) or display all posts but NOT the mentioned ones:

In the Display Settings, we may configure the exact way a WordPress carousel slider will be shown on different screens.

In the Post Template tab, select the default template. Alternatively, you may create the new Post Template to your liking but for now, we are good with the default option.

You may select the exact number of slides that will be displayed on each device: desktop, laptop, tablet, and mobile.

Additionally, you may set the needed number of slides to scroll (this number indicates how many slides are scrolled at a time when users navigate through the carousel):

The Enable Slideshow button turns the block into an automatic carousel slider WordPress. By enabling the slideshow, you will see the additional tab for setting the slideshow speed in milliseconds.

If you choose to make slides infinite, posts will be put in a loop and users will never “reach the end”. By choosing the Infinite option, you will see the additional tab for animation speed (how often slides are going to change). The standard speed parameter is 800.

The Center Mode option enables the preview for the previous and next slides on both sides.

Last but not least, set the spacing parameters between slides (small, medium, large or huge).

Overall, this is how the Post Carousel block by Getwid looks like with all the turned-on functions:

For more detailed information on the Getwid Post Carousel block, view the next video tutorial:

Carousel Block by ZeGuten

ZeGuten is a premium collection of multipurpose Gutenberg blocks included in the Gutenix theme at no cost. The number of content blocks in ZeGuten is slightly fewer than ones by the Getwid plugin, yet very diverse in functionality and scope of application.

Using the ZeGuten plugin, in particular, the WordPress Carousel block is perfect for earlier-added skins of the Gutenix multipurpose theme (Enlist,  BusyMode, Jobler, etc). 

How to Add the Carousel Block by ZeGuten?

Click the + button, type in “Carousel” and insert the needed block (as described earlier).

By default, the Carousel block by ZeGuten comes with 3 items and 2 slides. To add more items and change the number of slides, click on the block and go to the General Settings in the right sidebar.

In this section, you can also attune some more values and settings according to your needs:

variety of functions post carousel plugin wordpress

To set the number of slides to show on the different devices we should click on tablets and mobile icons.

We will choose 3 for desktop, 2 for tablet, and 1 for mobile:

vary number of slides

You can attune every item separately. For this purpose find the Item 1 Content, Item 2 Content, Item 3 Content tabs. Here you can add subtitle, title, and description texts for header and middle parts of your items and change the buttons settings.

add image

Style Settings

As you finished editing all content of your items, go to the Style Settings tab to stylize the block according to the website design. Here you can change the color, typography, paddings, etc for 3 different parts of your items.

Notice that above each radius, padding, indent, height, size, margin, and width fields there are desktop, tablet, and mobile icons. Remember that you can set the values for each of these screen types separately to achieve a great view of your page.

style settings post carousel plugin wordpress

You can change the arrows and dots settings in the Carousel Arrows and Carousel Dots tabs. 

Besides, you may alter the settings for different types of devices:

add arrows

To publish your carousel click on the Publish button and review the result.:

the result

If you turn on the Mobile view you will see how different our carousel looks on different devices.

responsiveness post carousel plugin wordpress

Conclusion

Building a responsive posts carousel is a pleasant experience with one of the two Gutenberg plugins for WordPress!

View other tutorials on Gutenberg blocks down the link:

2
Appreciate
10 Best Health Care & Medical WordPress Themes
Next post
10 Best WordPress Appointment Templates in 2021
Prew post
10 Best Health Care & Medical WordPress Themes
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.