Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 

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)

  1. Download the Plugin of the Owl Carousel Neo Particle for Hydrogen, Helium or Global installation.
  2. Install it over the Joomla Plugin System.
  3. 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.
  4. 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

  1. 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.
  2. Extract the files.
  3. 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.
  4. Copy the .js file to the folder /[GANTRY_THEME]/custom/js. Create the folder if it does not exist.
  5. Copy the .scss file to the folder /[GANTRY_THEME]/custom/scss. Create the folder if it does not exist.
  6. Create or modify the custom.scss file located under /[GANTRY_THEME]/custom/scss and add the following line @import "owlcarousel-neo"; at the end.
  7. 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

  1. Go to your Gantry templating backend (e.g. Extensions/Templates).
  2. 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.
  3. 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

Showroom

Insight of the Owl Carousel Neo - Gantry Particle configuration:

Backend (1) - General

1

Backend (2) - Look

2

Backend (3) - Behavior

3

Backend (4) - Behavior Responsive

4

Backend (5) - Animate

5

Backend (6) - Controls

6

Backend (7) - Slides (1)

7

Backend (8) - Slides (2)

8

Backend (9) - Timing

9

Backend (10) - API

10


A few example configurations which show the new design of the Particle:

Frontend (1) - Demo 1 - Black Mode

9

Frontend (2) - Demo 2 - Black Mode

10

Frontend (3) - Demo 3 - White Mode

11

Frontend (4) - Demo 4 - White Mode

12

Frontend (5) - Demo 5 - Helium-based

13

Frontend (6) - Demo 6 - Helium-based

14

Frontend (7) - Demo 7 - Helium-based

15

Future Tasks

  • Add more OwlCarousel2 API options / events / callbacks if necessary.

Known Issues

None

Dependencies

Gantry Framework

Helium Template

Owl Carousel 2

Credits

Thanks to the Gantry team for providing a modern templating framework.

by thex | gantryprojects

Copyright (c) 2020, free to use in personal and commercial software as per the license.

About

This project is based on the default Gantry Helium - Owl Carousel Particle but extends it with additional features and also includes slick new designs.

Resources

License

Packages

No packages published