Owl Carousel Neo - Particle for Gantry

This project contains a Gantry Particle and is based on the default Gantry Helium - Owl Carousel but extends it with many useful additional features (e.g. lazy load, timed slides, ...) and also includes slick new designs. Owl Carousel Neo is an advanced version of the standard Particle created by Gantry and RocketTheme. Furthermore, it provides an easy, user friendly and GUI assisted configuration and integration. In the current revision the following CMSs are supported:

Joomla
Wordpress
Grav

Prerequisites

CMS (Joomla, Wordpress, Grav)
Gantry Templating Framework and Theme

Download

Choose the correct download for your target platform. The Joomla Plugin System is supported for all Gantry themes globally or locally for the templates Helium and Hydrogen. The latest Particle version is v1.3.2.

Attention: When migrating from v1.0.5 or below to v1.2.0 or higher the existing settings of the Particle will be reset.

Default Particle: English / German

Legacy Particle - Gantry <5.3.2: English / German

Joomla Plugin - All Templates (Global): English / German

Joomla Plugin - Hydrogen: English / German

Joomla Plugin - Helium: English / German

Automatic Installation (Joomla only)

Download the Plugin of the Owl Carousel Neo Particle for Hydrogen, Helium or Global installation.
Install it over the Joomla Plugin System.
Create or modify the custom.scss file located under /[GANTRY_THEME]/custom/scss and add the following line @import "owlcarousel-neo"; at the end. Please check the list below to determine where the template folder for your CMS is located.
Don't forget that you have to import the Gantry dependencies within the custom.scss file before you import the Owl Carousel Neo Particle if not already done. Please use the following statement to import the dependencies file: @import "dependencies";

If you install the plugin globally be aware that the resource location changes to /media/gantry5/engines/nucleus

Manual Installation

Download the Default or Legacy Package of the Owl Carousel Neo Particle. If you are using Gantry <5.3.2 please use the Legacy Package for compatibility reasons.
Extract the files.
Copy the .html.twig and the .yaml file to your particle folder /[GANTRY_THEME]/custom/particles. Please check the listing below to determine where the template folder for your CMS is located.
Copy the .js file to the folder /[GANTRY_THEME]/custom/js. Create the folder if it does not exist.
Copy the .scss file to the folder /[GANTRY_THEME]/custom/scss. Create the folder if it does not exist.
Create or modify the custom.scss file located under /[GANTRY_THEME]/custom/scss and add the following line @import "owlcarousel-neo"; at the end.
Don't forget that you have to import the Gantry dependencies within the custom.scss file before you import the Owl Carousel Neo Particle if not already done. Please use the following statement to import the dependencies file: @import "dependencies";

CMS Template Folder

Please be aware that the template folder path varies in dependence of the used CMS. Here is a list of the folders for the different platforms:

Wordpress

/wp-content/themes/[GANTRY_THEME]

Joomla

/templates/[GANTRY_THEME]

Grav

/user/data/gantry5/themes/[GANTRY_THEME]

Configuration

Go to your Gantry templating backend (e.g. Extensions/Templates).
Switch to Layout and add the new appearing Particle called Owl Carousel Neo either globally to your site (base outline), to a specific template or page by dragging it to the designated section.
Configure the appearance according to your favor.

Many of the provided options are directly passed over to the OwlCarousel2 API. Please check out the link to find out more about the available options.

Please also take a look at the OwlCarousel2 demo page which provides many useful hints on how the carousel plugin works. Many of the existing options are already included in Owl Carousel Neo but if you are desperately missing a feature. Please open an issue with your feature request.

If you need a list of all supported API options for the responsive mode of the carousel, please visit this page and scroll to the bottom.

Most of the settings outlined within the API options are supported by this Particle. Even though some of them are named differently to reflect their real behavior. Please also check the field descriptions in the Particle which offer more information about each option.

Supported Parameters, Particle Options and Features

All settings of the original Particle are included and compatible
Updated to latest version of Owl Carousel 2
Supports most of the API options offered by Owl Carousel 2
Four new basic alignment styles for the slider
Two themes (black or white) for the new styles
Default Helium style with many additional settings (dots, navigation and text)
Lazy and responsive loading of images included
Timing of slides (annual or one-time)
Seven different control colors (independently per control type)
Dot navigation alignment
Configuration of navigation arrows
Full responsive configuration of all controls
Overlay image improvement
- all six Helium overlays included
- five new overlays
- or use accent overlay of current template
Border radius for buttons, dots underlay and carousel (square or round)
Link can be applied to title and slide as well
Slide button can be "replaced" by the title link
Delay the loading of carousel controls
Option to define JS run time
JS priority and placement (head or footer)
JS configuration
- Remote, Local and Default
JS execution
- Asynchronous
- Deferred