1. Home
  2. Docs
  3. Livemesh Addons
  4. Core Addons
  5. Posts Carousel

Posts Carousel

Post Carousel Element

The responsive carousel helps display posts or any custom post types like your portfolio entries with controls available for easy navigation of the items displayed.

Posts Query

The element features a Posts Query window to help choose posts or custom posts to display. This powerful tool has a number of fields to control what gets displayed and in what order with an additional field available to provide query arguments explained in the codex page.

Posts Carousel Build Post Query Tool

Posts Carousel Post Query Options

Posts Carousel Posts Query Sort Options

The Posts Query tab has the following options for filtering posts –

  1. Source – Can be Custom Query, Current Query or Related. The grid can be utilized to display a custom query specified by the user using the fields below or can display the posts returned by the current query or can display related posts for the current post based on taxonomy of the current post. The Current Query and Related options are useful when creating theme builder templates for post archives and single posts.
  2. Post Types – Select the custom post type that you need the element for. By default “All” is selected.
  3. Taxonomies – If you need to filter the posts by specific category or taxonomy terms, you can choose one or more of the taxonomy terms from this dropdown.
  4. Post In – This field enabled you to specify the post ids of the posts or custom post types you would like to include in your widget. Provide a comma-separated list of Post IDs to display in the carousel.
  5. Posts Per Page – Set the number of posts you wish you display in the widget. If the element does not support pagination, the number of posts displayed is limited by the number specified here. Choosing the value zero makes the widget display all the selected posts.
  6. Order By – Lets you decide on how you want the posts to be ordered – by Published Date, Modified Date, by Post ID, by Menu Order, Comment Count, Post Title (alphabetical sort), etc. and whether you want the ordering by Ascending or Descending.
  7. Order – Can be ascending or descending sort order applied to the Order By parameter above.
  8. Offset – Number of posts to offset or skip or pass over when fetching query results.

Posts Carousel Skin Options

The Grid Skin group lists two options – Classic Skin and Custom Skin, each of which is explained below –

Posts Carousel Skin Options

  • The “Classic Skin” is the built-in styling provided for the carousel items.
  • Choose “Custom Skin” if you want to use a theme builder template for the carousel item. If you find the built-in style to be insufficient or do not meet the exact needs of your project, you can choose the ‘Custom Skin’ option to create a custom grid style of your own.

The Custom Skin is best explained with a video tutorial on YouTube. This option is really powerful with support for custom fields created by plugins like ACF, Pods, and Toolset and can help take Posts Carousel to next level in creating a new class of widgets as demonstrated in the video.

Posts Carousel Post Content Options

The content displayed as part of a post grid item can be controlled by enabling and disabling content attributes listed in the Post Content control group –

Posts Carousel Posts Content Options

  • Choose Taxonomy to display info – When the post info is displayed, the specific taxonomy you want the info to use. For example, choosing category will display category information for a posts while choosing ‘post_tag’ would display the tag information for posts.
  • Link images to Posts – Make the images link to the posts or custom post types they represent.
  • Display post titles – Checking this box will display post title below the featured image for the posts or custom post type.
  • Display post excerpt/summary – Display summary information for the posts below the featured image and post title.
  • Post Meta – Display post meta information like published date, author name, taxonomy information below the posts. The specific taxonomy chosen above under “Choose Taxonomy to display info” will be used for display taxonomy information.

Posts Carousel Settings

This section has options that control how the carousel is displayed. Options include autoplay speed, gutter value between post items in various resolutions, navigation controls for carousel, number of columns or items to display before making the user scroll for additional items etc.

Posts Carousel Settings Window

Posts Carousel Responsive Settings

  • Prev/Next Arrows – Display navigation for the carousel.
  • Show dot indicators for navigation – Display control navigation or pagination controls for the carousel.
  • Autoplay – Display carousel as a slideshow.
  • Autoplay speed in ms – The time between display of each page of images when Autoplay option is enabled.
  • Autoplay animation speed in ms – The time taken for animation that moves the carousel to next or previous page of items.
  • Adaptive Height – Enables adaptive height for single slide horizontal carousels.
  • Pause on mouse hover – Pause the slideshow if the user has mouse hovered over the carousel contents.
  • Columns per row – Number of gallery items visible at any given point of time without scrolling.You can control the number of items visible at various resolutions like those of tablet/smartphone by providing appropriate values in the ‘Responsive’ tab.
  • Columns to scroll – With each scroll action – using the prev/next arrows or the dotted navigation, specify the number of items to scroll for each invocation of the navigation controls. You can control the number of items to scroll at various resolutions like those of tablet/smartphone by providing appropriate values in the ‘Responsive’ tab.
  • Gutter – The spacing in pixels between images/videos in the carousel. You can control the spacing/gutter at various resolutions like those of tablet/smartphone by providing appropriate values in the ‘Responsive’ tab.

Posts Carousel Customization

The Posts Carousel provides a large number of customization options in the Style tab including the typography controls.

Posts Carousel Style Tab

Was this article helpful to you? Yes 1 No 1

How can we help?