The image carousel is another awesome option in the nectar image gallery element. It allows you to show off your images in a touch-enabled, high-performing carousel. Control the number of columns in every responsive breakpoint easily and make it unique by changing the many available styling options. All of this is available with bulk image uploading and drag & drop reordering. See some of the examples below to get a taste of what’s possible.
The optional styles for Image Carousels are Flickity Style and Flickity Static Height Style. These styles are both very similar but they do have a few subtle differences.
Flickity Style
For the Flickity Style, along with the Default Included Fields, you can also set the Number of Columns the images should display in for different screen sizes: Desktop Columns, Small Desktop, Tablet Columns & Phone Columns. Columns can be set as 1 - 6. This option works best with images that are all the same dimensions.
Flickity Static Height Style
For the Flicikity Static Height Style, along with the Default Included Fields, you can set the Image Heights for different screen sizes: Desktop Image Height, Small Desktop Image Height, Tablet Image Heights & Phone Image Height. This means that if the images are different dimensions, they will be cropped to fit the specified Image Heights. So this option is a good choice for images that are not all the same dimensions. The Next/Previous Arrows option does NOT work with this style unless the images are all sized the same.
Default Fields Included in All Image Carousels
Default Included Fields: Image Spacing, Carousel Controls, Image Parallax, Subtle Image Scale when Dragging, Stagger Columns, Free Scroll, Auto Play, Box Shadow (Small Shadow, Medium Shadow, Large Shadow, Very Large Shadow), option to Display Title + Caption under each image, & On Click options (No Action/Static Image only, Open Image in Lightbox, or Open Custom Link.)
Carousel Control / Navigation Options
Carousel Control options include: Default Pagination, Material Pagination (bullets), Next/Previous Arrows, Next/Previous Arrows Overlaid, Touch Indicator & Total Visualized, Touch Indicator Only, or None.
The Stagger Columns option will NOT work with any Image Box Shadows.
See examples of all the variations & options below!
Image Carousel Examples
Flickity Style with Default Pagination, Parallax Images & Stagger Columns
Flickity Style with Nav Arrows Overlaid & Large Depth Box Shadow Applied
Flickity Style with Next/Previous Arrows Navigation & Subtle Image Scale on Scroll
Flickity Style with Touch Indicator & Total Visualized Navigation, Display Title + Caption & Free Scroll & Stagger Columns
Flickity Style with Material Pagination & Free Scroll Effect & Infinite Wrap
Flickity Static Height Style with Default Pagination & Medium Box Shadow, Parallax Image Effect & Free Scroll
Flickity Static Height Style with Material Pagination & Very Large Box Shadow & Auto Play (set to 8 seconds)
Flickity Static Height Style with Next/Previous Arrows Overlaid, Images of Varying Dimensions & Subtle Image Scale on Scroll Effect
Flickity Static Height Style with Touch Indicator & Total Visualized Navigation & Parallax Images, Display Title & Caption
Flickity Static Height Style with Touch Indicator Navigation (Solid Background)
