Custom Items

This document explains how to manually add carousel items to the DP Owl Image Carousel module available in the Owl Carousel Pro plugin. There are two types of modules available in Owl Carousel Pro:

DP Owl Carousel – This module displays posts or custom post types items in the carousel. The filter below will not affect the items in this carousel. You’ll need to use the Custom Query filter to modify the items in the DP Owl Carousel module.

DP Owl Image Carousel – This module displays manually added images and other content in the carousel. These images and content can be added from within the module. The filter below will allow you to dynamically populate the carousel with items from any source rather than manually adding them using the module’s settings.

Below is a basic example of the Custom Items filter:

You can see in the example above we are simply displaying static content in the carousel but only for DP Owl Image Carousel modules that have the ocp-custom-items CSS ID added to the Advanced tab -> CSS ID & Classes -> CSS ID input. Any modules that do not have this CSS ID added will display the content added in the module if any has been added. You can modify this if statement to an if/else statement to display different content for modules with different CSS IDs.

You can also see each carousel item is wrapped in a div with class dp_oc_item and each element within this div also has a dp_oc_ class. These elements and helper classes are required if you want to use the module’s Design and Advanced tabs to control the image effects, font settings, custom CSS, etc. If you do not need to use the module to help with design, you can display the HTML however you like.