Carousel Module for Oxygen

This custom module/component brings features of SplideJS directly to Oxygen Builder.

A Few Notes

Always use classes for slides styling as Splide removes IDs on each slide.

Apply Params
To preview and set all the changes you have made, simply click on this button.
This button also re-render OxyNinja Slider builder preview.
Simply click on this button, if it seems that content inside component looks different as it should.

Live Preview
This button will appear after click on the Apply Params and only on repeater / images & divs slider type.
We had to create this feature, as preview inside the builder didn't work well for those elements.
Whole point of a Live Preview is to provide a way to show slider in the same way as on the rest of the slider types. Please, don't edit content of the slider, when Live Preview is active. Before any edits, just click Apply Params.

Breakpoints
Few options have ability to hold different settings on different breakpoints.
You can easily change those option by switching Oxygen breakpoints.
All options have default values to match different breakpoints in the best possible way.

Structure / Nesting
Please, don't insert any other elements in the OxyNinja Slider component. Only elements that should be nested inside are repeater/images/divs. Also, please don't insert OxyNinja Slider component inside repeater.

Custom Arrows
You can create your custom arrows anywhere on the page. Its only upon your imaginations if you want to use icons, images or any other element. You can simply accomplish that with class name and custom attributes.

Example in 5 easy steps:
1. Create div and add class name oxyninja
2. Switch back to id (instead of class)
3. Create Attribute from advanced tab
4. Add the name of the attribute — nav
5. Add the value of attribute, which is combination of slider
Unique Slider Name (lower case), dash (-) and fwd (forward) or bwd (backward)

Some features and options are disabled in the builder for better user experience.

If you are not using slider on your pages, you can turn it off in OxyNinja settings panel.

Slider Types

• Repeater — Works only with Oxygen repeater element.
• Images & Divs — Works only with image and div elements.
• Product Image — Works only on product template. You don't have to insert any image inside this
  slider as everything is done automatically.
• WooCommerce Gallery — Works only on product template. Images are loaded automatically from
  the field product gallery (from product page).
• MetaBox — Works with both free and pro version. See below on how to create custom gallery.
• ACF Gallery — Works only with ACF PRO. You will have to create a new custom field.
  It's not possible to use it with ACF repeater and grouped fields or gallery field from options page.
• Toolset — Works with both media gallery images and external images from URL.
• HappyFiles — Works with free and pro version. Input field match name of the folder
  (with uppercase and spaces also).
• Admin 2020 — For this to work, you will need to know id of the media folder. See below on how
  to find id of the folder.

OxyNinja Slider — Main Fields

Unique Slider Name
This field helps to determine which slider is in use. You can leave it empty and it will be generated automatically on page load. After inserting slider name, field will be formatted to match proper naming syntax. You can use slider name to create custom arrows (explained section above).

Slider Data Source
In this dropdown, you can select data source for your slider. MetaBox, ACF, Toolset, HappyFiles and Admin 2020 are optional and you can activate them by installing/activating desired plugin. Product Image and WooCommerce Carousel will appear if WooCommerce is active.

Please, don't install both HappyFiles and Admin 2020 as those two plugins doesn't work properly together.

Each time you change slider type, some fields will reset back to their initial value as each slider type have different settings.

Repeater / Images & Divs

Slider Type
Slide: regular slider behavior
Loop: carousel slider
Fade: change slides with fade transition — always visible just one slide

Transition Speed
Speed of transition between slides in milliseconds.

Height
Height of the slider in different height units. If you leave field empty, slider will automatically determine its height.

Gap [ Disabled in Fade Type ]
Gap between slides in different units

Focus [ Slide Type Only ]
Centering active slide and creates empty space.

Related WooCommerce Products
This option will modify wp_query to show related product to main product on Oxygen product templates.

Items per Page [ Disabled in Fade Type ]
Choose how many slides will appear inside slider.

Items per Move [ Disabled in Fade Type ]
Chose how many slides will move on arrows click or autoplay.

Pagination
Enable / Disable pagination under the slider.

Arrows
Show / Hide arrows inside the slider.

Padding
Enable / Disable slider padding. If padding is enabled, you can choose padding for left and right side.

Rewind [ Disabled in Loop Type ]
Rewind a slider before the first slide or after the last one. 

Autoplay / Autoplay Interval
Enable / Disable autoplay feature. If autoplay is enabled, you can choose autoplay interval between slides (in milliseconds).

Easing
CSS Transition Timing. You can insert values like: ease, linear, ease-in, ease-out, ease-in-out or cubic-bezier(.42,.65,.27,.99)

Product Image

Note: This source type is only for main product image and should be used only on the product template.

Transition Speed
Speed of transition between slides in milliseconds.

Image Aspect Ratio
Main image will keep original aspect ratio or you can set it to square, if you use different image ratios in Product Gallery option.

Show Thumbnails
Show / Hide thumbnails underneath the main product image.
On regular product, those images come from Product Gallery option on edit product page.
On variable product, those images come from each variation settings (image field).
If there are no variations images, then it follows same logic as on regular product.

Number of Thumbnails
You can set how many thumbnails will be visible underneath the main product image.

Thumbnails Fill
If you set Number of Thumbnails to 5 but product has only three images, this option can fill up the white space of those missing images.

Height
Height of the main image in different height units. If you leave field empty, slider will automatically determine its height.

Gap
Gap between thumbnails in different units

Product Effect
You can enable default WooCommerce Zoom effect on hover or lightbox effect on image click.

Show Product Badges
Enable / Disable all product badges that are shown inside the main image.

Product Badges
With those settings you can set left offset between badges and also position of the badges. Each badge has it own settings so you can customize each one as you want.

Custom Badge
If you want to use custom badge (for free shipping badge or maybe free gift badge) you will have to install free version of plugin ACF. New custom field will appear on edit product page as OxyNinja Custom Product Badge.
You can also use custom badge with MetaBox or Toolset.
MetaBox text field id: on_mb_badge (see below for code snippet)
Toolset text field name: on_toolset_badge

Group key: group_5fcf911da5e77
Field key: field_5fcf9128be5fd
Name: on_custom_product_badge

Arrows
Show / Hide arrows inside the main image.

Rewind
Rewind a slider before the first slide or after the last one.

Autoplay / Autoplay Interval
Enable / Disable autoplay feature. If autoplay is enabled, you can choose autoplay interval between slides (in milliseconds).

Easing
CSS Transition Timing. You can insert values like: ease, linear, ease-in, ease-out, ease-in-out or cubic-bezier(.42,.65,.27,.99)

WooCommerce Gallery

Note: As this might be confusing — this option only works with images from the field “Product Gallery” located on product page (right sidebar). This source type will work only on the product templates.

Image Thumbnail Size
With this option you can choose the size (quality) of the slide images from default WordPress options.

Lightbox
Enable / Disable lightbox effect by clicking on the image.

Rest of the settings are the same as the ones in the repeater type.

MetaBox / ACF / Toolset / HappyFiles / Admin 2020

MetaBox
Insert Image Advance id name (like on_mb_gallery) of your custom MetaBox Gallery. This integration will work with both free and paid version of MetaBox. You can use MetaBox online generator and Code Snippets plugin as free version don't have user interface or you can copy snippet at the end of the page.

ACF Field
Insert field name (like acfgallery) of your custom ACF Gallery. This option will appear only if ACF PRO is active as free version of ACF allows only one gallery image. It's not possible to use gallery field which comes from ACF repeater or grouped fields for now.

Toolset Gallery Field
Insert field name (like toolsetgallery) of your custom Toolset Gallery. As Toolset gallery comes with feature to insert external images from link to the gallery, its possible to use also with OxyNinaj Slider.

HappyFiles Category Name
Insert category name (like My Custom Category) from folder created in HappyFiles. With free version of HappyFiles you can use up to 10 custom categories.

Admin 2020 Folder ID
Insert folder ID (folder-id attribute) of Admin 2020 folder. Right now, its only possible to find folder id with dev console.

Rest of the settings are the same as the ones in the WooCommerce Gallery type.

We sent message to Admin 2020 developers, if they can set folder ID to be visible in WordPress Media dashboard.
If you use this feature on regular basis, please send them feature request also.

Extensions

AutoScroll
This extension will automatically scroll slider. You can also choose speed of autoscroll and there is possibility to enable / disable autoscroll pause on slider hover.

Note: If you don't see extensions field, that means that autoscroll is not available for those options. Also, autoscroll will disable options like arrows, pagination, autoplay and mouse drag.

Code Snippets

MetaBox Custom Product Badge

MetaBox Gallery