Simple Posts Carousel

Using this element, you can add a carousel with posts of a certain post type to your page (fig. 1.1):

Fig. 1.1. Simple Posts Carousel.

Fig. 1.1. Simple Posts Carousel.

Content

First “Query” tab in widget settings offers to select which posts to display (fig. 1.2):

Fig. 1.2. Query Settings.

You can select posts basing on their:

  • post type: blog post, portfolio, your CPT from The7 Post Type Builder. There are also options “Archive (current query)” – for displaying current query of posts, when building an archive template; and “Related” – for displaying so called “Related Posts” section on a single post page;
  • taxonomy (category, tag, etc.);
  • terms (type-in the specific category or tag you’d like to display);
  • option for ordering posts by date, name, etc.

You can also limit the number of posts in the carousel and define the offset for posts query (i.e. 2 means, posts will be displayed starting from the 3-rd post).

Fig. 1.3. Content Settings.

Fig. 1.3. Content Settings.

In the “Content” tab, you can decide which elements to display (fig. 1.3). Enable/disable:
  • links across the post (including a custom link specified in a custom field of a CPT – fig. 1.4);
  • title (also select h1/h2/h3/… tag for the title and specify its max width);
  • featured image;
  • excerpt (specify the number of words);
  • meta info: category, author, date, number of comments;
  • “Read more” button (also specify the button label).
Fig. 2.4.1. Making posts link to a custom link.

Fig. 1.4.1. Making posts link to a custom link.

Fig. 2.4.2. Applying Custom Link to a Single Post.

Fig. 1.4.2. Applying Custom Link to a Single Post.

“Scrolling” tab (fig. 1.5) allows to configure the aspects of animation:

  • scrolling mode (one slide at a time OR all slides in the viewport);
  • transition speed;
  • autoplay.
Fig. 1.5. Scrolling Settings.

Fig. 1.5. Scrolling Settings.

In the “Arrows” tab (fig. 1.6) you can decide if the arrows should be displayed always, on hover only or never. Also, it allows to consider the entire height of a post or only featured image height, when positioning the arrows vertically.

Fig. 1.6. Arrows Options.

Fig. 1.6. Arrows Options.

“Bullets” tab (fig. 1.7) also has setting for making bullets visible always/never/on hover.

Fig. 1.7. Bullets Options.

Fig. 1.7. Bullets Options.

Style

The “Box” tab allows to style the area behind the entire box (fig. 2.1):

Fig. 3. Box Behind the Text.

Fig. 2.1. Box Behind the Text.

You can adjust:

  • content position inside of the box;
  • height or adaptive height (to automatically adjust the height of the box depending on the content height of each post);
  • border width, color and radius;
  • background color and padding;
  • box shadow.

Within the “Featured Image” tab, it is possible to configure the following settings of posts featured images (fig. 3.2):

  • vertical and horizontal alignment;
  • gap between the image and text;
  • max width and image width/height ratio (leave empty to keep the original image proportions). When choosing specific ratio, you can also select “object fit” (fill, cover or contain);
  • hover icon and its styling;
  • border width, color and radius;
  • box shadow;
  • overlay for normal and hover conditions;
  • CSS filters;
  • image opacity for normal and hover conditions.