Skip to main content

Post Carousel Module

Using the Post Carousel Module​

Follow these steps to learn how to use the Post Carousel module.

Step 1: Add Post Carousel Module​

Make your way to the page of your choice and add the Post Carousel Module.

Post Carousel Module added to Layout

Step 2: Customize The Post Carousel Module​

After adding the Post Slider Module you will need to customize it by defining the Post Type and Custom Loop Layout. Please view the Post Carousel Module settings below.

Post Carousel Main Settings

Post Carousel Module Settings​

Main Options​

The Main Options section allows you to define which content is displayed in the carousel and what happens when no content is found.

  • Post Type
    Choose the post type you want to display in the carousel (e.g., Posts, Pages, or any custom post type such as People).

  • Custom Loop Layout
    Select a layout from the Divi Library to display each post in the carousel. This layout can be built with a combination of the Divi and Divi Machine modules.

    note

    For more information on building a Custom Loop Layout, see the documentation here.

  • No Posts Layout
    Optionally select a fallback layout from the Divi Library that will be displayed when no posts are returned by your carousel settings.

  • No Posts Text
    If no fallback layout is selected, this text will be shown instead. The default message is:
    Sorry, No posts.

Loop Options​

This is where you control which posts in your chosen Post Type are shown and how they are sorted. The settings are separated into 3 tabs which are detailed below.

General Tab​

The General tab under Loop Options allows you to control how many posts appear in the carousel and whether to include the current post.

Post Carousel module General Loop Options

  • Post Status
    Choose the status of the posts to include in the carousel.
    Common values include Publish, Draft, or Private.

  • Post Count
    Set how many posts to display in the carousel.
    This is useful if you want to limit the number of items shown (e.g., only 6 team members or 3 testimonials).

  • Post Display Type
    Choose how posts are sourced for the carousel. Depending on your selection, additional options will appear:

    • Default
      Shows posts based on the filtering and sorting settings configured in the other tabs.

    • Related
      Displays posts that are related to the current post based on shared taxonomy terms or ACF fields.
      When selected, you’ll see a Related Content setting where you can choose one of the following methods for finding related content:

      • Categories
      • Tags
      • Post Object (based on an ACF Post Object field)
      • ACF Field (match posts using values from a specific ACF field)
      note

      If you choose Post Object or ACF Field, ensure the field is correctly configured in the Include Terms tab using the Filter By ACF Name option.

    • Linked Post
      Displays posts directly linked via an ACF Post Object field on the current post.
      When selected, an additional field appears:

      • Linked Post Object ACF Name – Select the ACF field that holds the linked post(s).
      tip

      Use this option when you want full control over which posts are displayed per post—for example, hand-picking team members for each project.

  • Include current post?
    By default, the current post is excluded from the carousel (useful when placing the carousel on a single post page).
    Toggle this ON to include the current post in the results.

Include Terms Tab​

The Include Terms tab allows you to filter which posts appear in the carousel based on taxonomy terms or ACF field values.

Post Carousel module Include Terms Loop Options

  • Show Posts of current taxonomy terms on taxonomy page?
    Enable this option to automatically show posts that match the taxonomy term of the current page (useful on category or tag archive pages).

    tip

    This dynamic filtering only applies on taxonomy archive pages. Leave it disabled for static pages.

  • Include Categories (comma-separated)
    Enter the slugs of specific categories to filter by.
    Example: news,events,case-studies

  • Include Tags (comma-separated)
    Enter the slugs of specific tags to filter by.
    Example: divi,plugin,carousel

  • Choose Your Taxonomy
    Select the taxonomy type used for filtering.
    Options typically include category, post_tag, or any registered custom taxonomy.

  • Include Custom Taxonomy (comma-separated)
    If you've selected a custom taxonomy above, list the slugs of the terms you'd like to include.
    Example: featured,highlighted

  • Include ACF Field
    Select an ACF field to use for filtering posts. This works best with text or select fields.

  • Include ACF Value
    Define the value from the ACF field to match. Only posts with a matching value will appear.

    note

    This ACF filtering is especially useful for advanced relationships, such as displaying posts that share the same department, location, or tag stored in a custom field.

Sorting Tab​

The Sorting tab allows you to control the order in which posts appear in the carousel.

Post Carousel module Sorting Loop Options

  • Sort Order
    Choose the field to sort posts by. Options include:

    • Date: Sort by published date.
    • Title: Sort alphabetically by post title.
    • ID: Sort by post ID.
    • Random: Shuffle the order each time the page loads.
    • Menu Order: Use the order defined in the WordPress page-attributes or custom order plugins.
    • Name: Sort by post slug.
    • Modified: Sort by last modified date.
    • ACF Field: Sort using a custom ACF field (see below).
    • ACF Date Picker: Sort using an ACF Date Picker field with advanced filtering options.

  • Order
    Define the direction in which posts are ordered:

    • Ascending: A–Z, 0–9, earliest to latest.
    • Descending: Z–A, 9–0, latest to earliest.
Sorting by ACF Field​

If you select ACF Field as the sort order, additional options will appear:

  • ACF Sort Field
    Select the ACF field you want to sort by. This must be a field that contains numeric or text values.

  • ACF Field Value Type
    Choose the type of data in your ACF field:

    • String: For alphabetical text sorting.
    • Numeric: For sorting numerical values (e.g., price, rating, or weight).
Sorting by ACF Date Picker​

If you select ACF Date Picker, the following options will be shown:

  • ACF Date Picker
    Select the ACF field that stores the date value.

  • ACF Date Picker Method
    Filter posts based on date logic:

    • Default: No date-based filtering; just sort by the ACF date.
    • Today Only: Only show posts where the date is today.
    • Today and in the future: Include dates from today forward.
    • Today and next x days: Show posts with dates within a defined range from today.
    • In the Past: Show posts where the date is in the past.
    • Last 7 days (including today): Include posts dated within the last 7 days.
    • Yesterday and past x days: Show posts going back from yesterday for a set number of days.
    note

    These advanced date filters are ideal for events, announcements, or any date-driven content.

Extra Options​

These settings give you more control over the appearance and behavior of each post card inside the carousel.

Post Carousel Extra Options

  • Equal Height Grid Cards
    When enabled, all post cards inside the carousel will have the same height—even if the content length varies.
    Useful for maintaining clean alignment across slides, especially when using grid-style layouts.

  • Link each layout to product
    Enable this to make the entire custom loop layout clickable, linking to the single post or product page.

    note

    This setting is commonly used in shop-style layouts or team sections where each card should link through.

  • Align last module at the bottom
    This aligns the last module inside each custom loop layout to the bottom, helping create consistent vertical alignment across post cards.
    Especially helpful when your layouts include elements like buttons or meta info that should be bottom-aligned.

Use the Carousel Settings section to control the behavior and design of the slider on all screen sizes. You can choose between two supported libraries and fine-tune how the posts scroll and display.

Slider Library​

  • Slider Library
    Choose the JavaScript slider framework to power your carousel:
    • Slick Slider: A widely used, mature slider option.
    • Swiper JS: A modern and mobile-optimized slider with smoother animations and advanced features.

  • Swiper Prev CSS Class / Swiper Next CSS Class
    For Swiper JS, you can define custom class names for the previous/next arrow buttons if you’re styling them manually.

  • Enable Arrows?
    Toggle to show or hide left/right navigation arrows.

  • Disable Arrow Shadow?
    Removes the default shadow styling applied to navigation arrows.

  • Enable Dot Navigation?
    Show pagination dots below the carousel.

Responsive Layout Settings​

Control how many posts appear and scroll at each breakpoint.

  • Desktop Posts in View – Number of posts visible at once on desktop.
  • Desktop Posts to Slide – Number of posts that scroll when the carousel advances.
  • Tablet Portrait Posts in View
  • Tablet Portrait Posts to Slide
  • Tablet Landscape Posts in View
  • Tablet Landscape Posts to Slide
  • Mobile Posts in View
  • Mobile Posts to Slide
tip

For smooth layout behavior, we recommend setting the number of posts in view to odd values when using Center Mode.

Center Mode​

  • Center Mode?
    Enable this to highlight the middle post in the carousel and slightly shrink the surrounding items for visual focus.
    This only works well with odd numbers in view (e.g., 3 or 5).

Center Mode Preview

note

Center Mode only works when the Slick Slider library is selected.

Autoplay & Scrolling​

  • Autoplay and Delay
    Time (in milliseconds) between each auto slide. Leave blank to disable autoplay.

  • Slide Speed
    Duration (in milliseconds) of the slide animation. Default: 300.

  • Infinite Scrolling?
    Loop the carousel infinitely without stopping at the last post.

Animation Settings​

  • CSS Ease
    Choose the easing style for slide transitions. Options may include:
    • ease
    • linear
    • ease-in
    • ease-out
    • ease-in-out