MaxGalleria – Flickity Quickstart

INDEX

QUICKSTART GUIDE

The Flickity Slider addon is now included with MaxGalleria Pro and no additional installations are necessary.

Image Options

Image options allow one to specify borders and shadows around the slider. There several preset skins (borders), Picture Frame, Picture Show, Drop Shadow, Inner Shade and Custom. 

To add a custom border, select ‘Custom’ from the dropdown list, click the Display Border checkbox. Then select the desired border attributes and click the Update button to save your changes. Note, that sometimes, the chosen border radius does not match the border radius of the slider. In these cases, one can use the Image Radius field to adjust and override the currently selected radius.

Image Click Options

Image click options allow one to specify how the slider will react to clicks: enable clicks, specify what the click will open, the WordPress image page, the link enter into the image’s link field or the original image, and if will display in a new tab or the current browser tab.

Carousel Options

Visit https://flickity.metafizzy.co/options to learn more about Flickity Carousel options.

Draggable – Active automatically when there are two + slides. Uncheck to lock slides in place.

Free Scroll – Lets visitors glide freely without slides snapping. Combine with Wrap Around for endless scrolling.

Contain – Check this (and Free Scroll) to keep a horizontal scroller inside its frame.

Previous / Next Buttons – Show or hide the arrow buttons.

Page Dots – Show or hide the dot navigation.

Arrow Shape – Paste a custom SVG path for the arrows, The default is “M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z”.

Wrap Around – Loops from the last slide back to the first for infinite scroll.

Group Cells:

  • true — group whatever fits in view.
  • number/percent — group that many slides.
  • false — no grouping.

Auto Play:

  • true — advances every 3 s.
  • number — delay in ms.
  • false — off.

Pause Auto Play on Hover – Stops autoplay while the cursor is over the slider.

Adaptive Height – Slider height adjusts to the current slide.

Watch CSS – Lets you turn the slider on/off with CSS rules.

As Nav For – Enter the class name of another slider this one should control.

Drag Threshold – Pixels the pointer must move before dragging starts (default 3).

Selected Attraction – Higher value = faster snap to the selected slide (default 0.025).

Friction – Higher value = stickier, slower motion (default 0.28).

Free Scroll Friction – Motion feel while in free-scroll (default 0.075).

Lazy Load – Loads images only as they come into view.

Initial Index – Slide number that shows first (0 = first slide).

Accessibility – Enables keyboard tabbing and arrow-key navigation.           

Set Gallery Size – Matches slider height to the tallest slide. Uncheck if you size it with CSS.

Resize – Lets the slider recalculate its size on window changes. Uncheck if CSS handles it.

CSS Height – Fixed height for the slider (e.g., 300px or 50%). Leave blank for automatic.

Use Full Image Size – Displays images at their original dimensions.

Cell Alignment– Choose how slides line up inside the frame (left, center, right).

Main Selector – CSS selector for the slider container (default .main-carousel).

Cell Selector – CSS selector for each slide (default .carousel-cell).

Percent Position – Positions slides with percentages for better responsiveness.

Right-to-Left – Makes the slider move from right to left.