Layouts

1. Fixed number of items per row/column

  • This layout uses the "Single line" layout and the "Width set by number of images" image sizing option with all captions disabled
  • Select from 1-12 items per row
  • Optionally add rows
  • Limitation: This style does not work with automatic and repeating rotation due to Swiper.js library limitations


2. Apple Style/ Single Line

  • Customize your captions to include a button, description, and category, or any subset of those elements
  • Button can include an icon
  • You can trigger the "items per view" mode on this layout by selecting "Width set by number of slides" for the image size and setting the number of slides in the Layout configuration pop out.
  • Enable the play/pause button by updating the autoplay speed in the default slider settings.
  • You can trigger "Full view height mode" by enabling the "Set fixed image height" toggle in the image design panel. This is only compatible with the image sizing mode "Width set by number of slides".
  • This demo uses the "Overlay text" image hover effect.
  • This demo uses a dynamic collection to populate the images.

3. Caption overlay on the image

  • This demo has the background color, padding, and border enabled
  • Border style options include solid, dotted, or dashed, and you can change the border width and color
  • This slider uses the 'fixed height and fixed width' image sizing option
  • The button can be set to appear on the left, centered, or to the right
  • This demo uses the "zoom in" hover effect
  • This

4. Caption underneath the image

  • This demo stylized the pagination dots as rectangles by changing the height and width and removing border radius
  • This demo uses the navigation position "above the images stretched to the left and right" and uses the navigation icon style "fancy arrow"
  • This demo has a slider border, padding, and background color applied in the layout pop out
  • This

5. Testimonial

  • This demo has the image sizing set as "fixed height, full width"
  • The pagination dots have a border color turned on for the active pagination dot
  • This

6. Text only testimonial