Display blog posts or custom post types in a responsive, customizable carousel layout.
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.
Usage
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.
Settings
Loop Items
Automatically return to the first post after the last post.
Navigation Arrows
Enable to display left and right navigation arrows.
Animation Speed
Enter the carousel animation speed. Defaults to 800 milliseconds.
Autoplay
Enable to autoplay the carousel.
Autoplay Continuous Scroll
Requires Loop Items to be enabled. When all posts are seen, prevent the jump back to the first post and instead append the first post inline.
Autoplay Pause on Hover
Enable to pause the autoplay when hovering over a post.
Timeout
Enter the timeout period before the autoplay begins. Defaults to 8000 miliseconds.
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 IDs 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
Theme
Choose the Post Carousel theme. Currently, Default or Overlay is available. Please, allow a couple of seconds for the theme settings to be applied when changing themes. Additional themes for the Post Carousel Widget are available as part of the SiteOrigin Premium Carousel Addon.
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
Arrow Hover Color
Select the navigation arrow hover color.
Arrow Hover Color
Select the navigation arrow hover color.
Background
Select the navigation background color.
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.
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.
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.
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.
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.
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.
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.
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.
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;
} );