API Options

This document explains how to manually modify the default carousel API options in the Owl Carousel Pro plugin. Most carousel options can be set within the module’s settings. However there are a few options not available in the module’s settings. There may also be instances when you want to dynamically set the options or set the values to values not available in the module’s settings.

For example, the default breakpoints that decide how many items are displayed in the carousel at one time are:

• 767px or below (1 item)
• 768px – 980px (3 items)
• 981px or above (5 items)

These breakpoint values cannot be changed in the module’s settings. They are based on Divi’s Desktop|Tablet|Phone  breakpoints. However the number of items to display for each breakpoint can be changed in the module’s Design tab -> Thumbnails section -> Thumbnails to Display option. To change the breakpoint values, you’ll need to manually modify the API options using the example below.

You can see in the example above we are passing two arguments to the API Options filter: margin and responsive. Even though these options are already set in the carousel, the filter will override the default option values. Any options not added to the filter arguments will revert to default values set by the module.

In the example above we are overriding the default margin value between each carousel item from 8px to 32px (this value can be modified in the module’s Design tab -> Thumbnails section -> Item Margin option). We are also modifying the responsive breakpoints, adding a 480px breakpoint for small tablets and a 1200px breakpoint for larger screens. You can add or remove as many breakpoints as you want and set the number of carousel items to display for each breakpoint.

Also notice in the example above we are only applying these API options to carousel modules that have the ocp-breakpoints class. This class can be added to the module’s Advanced tab -> CSS ID & Classes -> CSS Class field. This allows you to have different breakpoints or other API options for different carousels on the same site. You can also remove the if statement to apply the options to all modules on your site.

Owl Carousel has many more API options available in addition to margin and responsive. Again, most of these options can be set in the module’s settings. For a full list, please refer to the Owl Carousel library API documentation.