Display your posts as a carousel.
Requirements
To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Post Carousel Widget.
The Post Carousel Widget is ready to be used anywhere:
Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.
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.
Taxonomy Relationship
The relationship between taxonomies. OR requires posts to have at least one of the specified taxonomies. AND requires posts to have all of the specified taxonomies.
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 Load
Set the number of posts preloaded in the background when clicking next. The default is 10.
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
Post Thumbnail
Thumbnail Overlay Hover Color
Set the overlay color when hovering over each thumbnail.
Thumbnail Overlay Hover Opacity
Set the overlay color opacity when hovering over each thumbnail.
Post Title
HTML Tag
Select the post title tag. Defaults to H3.
Font
Select the post title font family.
Font Size
Set the post title font size.
Color
Select the post title text color.
Navigation Arrow Color
Select the navigation arrow color.
Navigation
Navigation Arrow Hover Color
Select the navigation arrow hover color.
Navigation Arrow Hover Color
Select the navigation arrow hover color.
Navigation Background
Select the navigation background color.
Navigation Hover Background
Select 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 1.
Display Navigation Arrows
Enable to display the navigation arrows on desktops.
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.
Display Navigation Arrows
Enable to display the navigation arrows on tablet devices in landscape view.
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.
Display Navigation Arrows
Enable to display the navigation arrows on tablet devices in portrait view.
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.
Display Navigation Arrows
Enable to display the navigation arrows on mobile devices.
Global Settings
The following default settings apply to all Post Carousel Widgets and can be adjusted at PluginsSiteOrigin WidgetsPost Carousel: Settings.
Responsive
Desktop
Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on desktop. Defaults to 1.
Display Navigation Arrows
Enable to display the navigation arrows on desktops.
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.
Display Navigation Arrows
Enable to display the navigation arrows on tablet devices in landscape view.
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.
Display Navigation Arrows
Enable to display the navigation arrows on tablet devices in portrait view.
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.
Display Navigation Arrows
Enable to display the navigation arrows on mobile devices.
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;
} );