Display your posts as a carousel.
Quick Video Tour
Requirements
To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Post Carousel widget.
The Post Carousel widget can be inserted into any theme widget area at AppearanceWidgets or any post/page using Page Builder by SiteOrigin. If you’re using the Block Editor, the Post Carousel widget can be inserted via the SiteOrigin Layout or SiteOrigin Widget block.
Settings
Post Carousel Widget Settings
Title
Optionally enter a widget title.
Default Thumbnail
Optionally add a default thumbnail image used when posts don’t have a featured image added.
Featured Image size
Select the featured image size to be used. The list contains image sizes available in your WordPress installation. Simple Image Sizes plugin can be used to add new image sizes to your WordPress installation if you’d like to do so.
Link target
Choose where to open each carousel item. Choose between Same window or New window.
Loop posts
Automatically return to the first post after the last post.
Posts query
Click on the “Posts query” heading to open the posts query builder.
Post type
Optionally select a post type to display. By default “All” will be selected.
Post in
Optionally enter the post, page, or media IDs you wish to include in your post carousel. If you do not know the ID’s you can click in the field to open the select posts dialogue.
Taxonomies
Taxonomies are groups such as categories, tags, posts, and products. Optionally filter your posts by taxonomy. Click in the field to open the dialogue to begin searching.
Date selection type
Select a range between specific dates or relative to the current date.
Dates
Optionally filter your posts using a from and to date.
Order By
Click on the drop-down menu to specify how to order posts within the post carousel. The default order is “Published date”.
Order direction
Choose between ascending or descending.
Posts per page
Enter the number of posts you wish to display in the post carousel. Leaving the field empty will display all the selected posts.
Sticky posts
Choose how to display posts that have been assigned as sticky. The following options are available. Default (display sticky posts first), ignore sticky, exclude sticky (remove sticky posts from the carousel), only sticky.
Additional
Additional query arguments. See query_posts.
Below you’ll find an example of an additional query argument.
Don’t Display the Most Recently Published Post: offset=1
Design
Thumbnail overlay hover color
Set the overlay color when hovering over each thumbnail.
Navigation arrow color
Set the navigation arrow color.
Navigation arrow hover color
Set the navigation arrow hover color.
Navigation background
Set the navigation background color.
Navigation hover background
Set the navigation background hover color.
Responsive
Desktop
Slides to scroll
Set the number of slides to scroll per navigation click or swipe on desktop. Defaults to 3.
Tablet
Landscape
Breakpoint
Set the device width in pixels to apply the landscape tablet settings. Defaults to 1366.
Slides to scroll
Set the number of slides to scroll per navigation click or swipe on tablet devices in landscape mode. Defaults to 2.
Portrait
Breakpoint
Set the device width in pixels to apply the portrait tablet settings. Defaults to 1025.
Slides to scroll
Set the number of slides to scroll per navigation click or swipe on tablet devices in portrait mode. Defaults to 2.
Mobile
Breakpoint
Set the device width in pixels to apply the mobile settings. Defaults to 480.
Slides to scroll
Set the number of slides to scroll per navigation click or swipe on mobile devices. Defaults to 1.
Custom CSS Customizations
Custom CSS rules can be inserted at AppearanceCustom CSS if you’re using SiteOrigin CSS or CustomizeAdditional CSS.
Center Posts if Fewer Posts Appear Than Cell Width
Edit the row containing the Post Carousel widget. Click on the Attributes tab on the right and enter the following class name in the Row Class field:
center-carousel
Finally, insert the below rules at AppearanceCustom CSS if you’re using SiteOrigin CSS or CustomizeAdditional CSS.
.center-carousel .slick-slide {
float: none;
}
.center-carousel .slick-track {
display: flex;
justify-content: center;
width: 100% !important;
}
Advanced Customizations
Limit the Total Number of Posts Loaded by the Post Carousel
The following filter can be added using the Code Snippets plugin, a child theme, or a custom plugin.
add_filter( 'siteorigin_widgets_post_carousel_post_limit', function( $limit ) {
return 12;
} );