DP Owl Carousel

The DP Owl Carousel module loads posts and any custom post type into a horizontal carousel. There are several options available to control which posts are loaded and how they are displayed. The following options are available in the DP Owl Carousel module.

Content


CUSTOM QUERY – Each module has the capability of displaying results from a custom query you can add to your functions.php file using a filter. Please click here to view more information about how to use this option.

POST NUMBER – Limit the number of post results displayed in the layout per page.

OFFSET NUMBER – Use this option if you would like to skip a post. In other words, if you set the value of this option to 3 and display posts in order of most recent to oldest, the three most recent posts will be skipped in the results.

CUSTOM POST TYPE NAME – This is a checklist of post types that you have available on your website. You will always have Posts and Projects available, as these are default Custom Post Types (CPTs) included in WordPress and Divi. If you have any other CPTs (products, events, testimonials) they will also be available in this checklist. Once a CPT is checked, all categories for that CPT will be checked in the Categories list. You can avoid this by leaving the CPT unchecked and simply clicking only the categories you want to add in the Categories checklist.

* If you do not see a CPT in the checklist that should be available, click on the “Refresh Post Types and Categories” button. This will update the list to show any recently added CPTs and categories.

CATEGORIES – This is a checklist of categories from each CPT available on your website. We have also add the CPT name in parenthesis behind each category in case you have several CPTs with the same category name. If you would like to display every category, you can click the associated CPT in the Custom Post Type Name checklist. This will select all categories for that CPT. If there are several categories you want to remove, you can then simply uncheck them. You can also leave the CPT unchecked and click a handful of categories for that CPT. The associated CPT will automatically get checked.

INCLUDE/EXCLUDE TAXONOMY – This option is used to control which taxonomy the Include Tags and Exclude Tags options will be applied to. By default, the tags will be applied to the post_tag. If you would like to exclude project tags, you can type project_tag in this option. Now the Include Tags and Exclude Tags options will be applied to project tags instead of post tags.

INCLUDE TAGS – This option applies to the post_tag taxonomy by default, but can apply to any taxonomy by adding it to the Include/Exclude Taxonomy option above. Enter a single tag slug or a comma separated list of tag slugs. All posts in the categories above AND WITH these tags will load. Leave empty if you only want to filter using the categories above.

EXCLUDE TAGS – This option applies to the post_tag taxonomy by default, but can apply to any taxonomy by adding it to the Include/Exclude Taxonomy option above.Enter a single tag slug or a comma separated list of tag slugs. All posts in the categories above AND WITHOUT these tags will load. Leave empty if you only want to filter using the categories above.

ORDER BY – Order posts by date, title, slug or in random order.

ORDER – Order your posts in Ascending (most recent, alphabetical) or Descending (oldest, reverse alphabetical) order.

Elements


SHOW TITLE – Turn the post title on or off.

SHOW CATEGORY – Turn the category links on or off.

SHOW DATE – Turn the date display on or off.

SHOW CUSTOM FIELDS – Turning this option on will give you the option to display custom fields set in each post. Custom fields are shown below the image and post meta and above the post excerpt.

CUSTOM FIELD NAMES – (SHOW CUSTOM FIELDS option must be turned on for this to appear) Enter a single custom field name or a comma separated list of names. The same custom field names and values must be added to each post for them to display. Multiple custom fields with the same name are not supported. To display multiple values, add them to a single custom field either in a comma separated list. Custom field values can also contain HTML to support links, buttons, bullet lists, etc.

CUSTOM FIELD LABELS – (SHOW CUSTOM FIELDS option must be turned on for this to appear) Enter custom field label (can include a separator) or a comma separated list of labels in the same order as the names above. The number of labels must equal the number of names above, otherwise the name above will be used as the label for each custom field.

SHOW EXCERPT -Turn the excerpt display on or off.

AUTOMATIC EXCERPT LIMIT – (SHOW EXCERPT option must be turned on for this to appear) Enter number of characters to limit excerpt. If the post has an excerpt, this will be used in place of the truncated text from the post.

SHOW READ MORE LINK – Here you can define whether to show “read more” link after the excerpts or not.

READ MORE TEXT – Customize the text shown for read more link. Leaving this field blank will show “read more” by default.

ARROWS – Turn the left and right arrows that rotate the carousel items on or off. Arrows will only display if the number of available posts exceeds the number of thumbnails set to display per slide. For example, if you have the Thumbnails to Display option in the Design tab set to display five posts (default value) but only have five posts or less total, the arrows will not display.

ITEMS PER SLIDE ACTION – This controls how many carousel items will be rotated left or right when the left or right arrows are clicked. It will also control how many carousel items will be rotated left or right when the Automatic Rotate option is turned on in the Design tab.

CONTROLS – Turn the dot navigation controls on or off. The dot navigation will be displayed at the bottom of the carousel and is used to rotate faster through the carousel than using the arrows.

ITEM PER CONTROL ACTION – This controls how many carousel items will be rotated left or right when the control dots are clicked.

USE NAVIGATION THUMBNAIL IMAGES – Turning this option on will replace the dot navigation controls with thumbnail images of the featured images.

CAROUSEL BEHAVIOR – Choose Loop if you want your carousel to continuously loop through the posts. Choose Rewind if you want the carousel to change direction when it reaches the last post.

CAROUSEL DIRECTION – Choose which direction you want the carousel to advance.

CENTER – Turn this option on if you want the first carousel item to be centered in the carousel. This option must be on if you want to center the clicked image in the carousel when using Navigation Thumbnails.

AUTO WIDTH IMAGES -Turn this option on if you want to display images in the size set in the Thumbnail Size option in the Design tab. Leave this option off if you want images to display evenly and adhere to Thumbnails Per Slide option in the Design tab.

The Design tab contains font control options for for title, custom fields, etc. We have also added the following options to the Design tab:

Arrow


ARROWS COLOR – Controls the color of the left and right arrows.

ARROWS SIZE – Controls the size of the left and right arrows. Choose between small, medium and large. There is also a custom CSS box in the Advanced tab for each arrow for more control of the appearance.

Controls


CONTROL COLOR – Controls the color of the dot navigation controls.

CONTROL SIZE – Controls the size of the dot navigation controls. Choose between small, medium and large. There is also a custom CSS box in the Advanced tab for controls and active control for more control of the appearance.

Thumbnails


ORIGINAL SIZE – Turning this option on will load the original image instead of looking for the image thumbnail size set in the option below. If images are small and do not have a thumbnail in the size selected, this option will load the full size of the image. If your images are not displaying in the carousel, turn this option on.

THUMBNAIL SIZE – This is the size of the featured image that will get loaded into the carousel. Please note that the image size that gets displayed will depend on the number of images set to display in the option below and the Items Margin value set. Images will fill the carousel container. To prevent this, turn on the Auto Width Images option in the Content tab.

THUMBNAILS TO DISPLAY – This value determines how many carousel items will be initially displayed on the screen.

ITEM MARGIN – This value determines the amount of space between each carousel item.

Thumbnails Navigation


NAVIGATION THUMBNAIL ALIGNMENT – Determines whether the navigation thumbnail images at the bottom of the carousel should be aligned left, center or right. The Use Navigation Thumbnail Images option in the Content tab must be turned on to show navigation thumbnails in place of the control dots.

NAVIGATION THUMBNAIL SIZE – This determines the size of the navigation thumbnail images. You can further adjust the image size using CSS in the Navigation Thumbnail Image box in the Advanced tab.

Click Action


OPEN IN LIGHTBOX – Turning this option on will open the featured image in a lightbox instead of linking directly to the post.

Animation


AUTOMATIC ROTATE – Turn this option off if you don’t want the carousel to automatically rotate through the carousel.

AUTOMATIC ROTATE SPEED – (Automatic Rotate option must be turned on for this option to display) Determines how fast the carousel will automatically rotate the carousel. Value is in milliseconds.

PAUSE ON HOVER – Turn this option off if you don’t want the carousel to pause when the user’s mouse hovers over the carousel

The Advanced tab contains CSS boxes for additional control over the carousel and carousel items.

Share This