Products Slider

A slider of products and descriptions with optional filter.

Note: The section this module is added to should have its Content Alignment set to Full width.


View a live demo of this module.

Content

  • Include a heading with eyebrow, heading, sub-heading, text, and/or buttons
  • Add a filter
  • Add any number of products that include a category (if adding a filter), image, heading, text, and/or button
  • Change spacing between slides
  • Change number of sliders to show at a time on desktop, laptop, tablet, and mobile
  • Change heading placement (remove, left of slider, right of slider, above slider)
  • Edit filter label and placeholder
  • Include aria labels on slider arrows for screen reader accessibility

Styles

  • Set Dark Mode of heading/slider and slides separately
  • Change text alignment of heading
  • Change text alignment of heading on mobile
  • Set a max width on the heading
  • Change background color of slides
  • Truncate the title to limit it to a certain number of characters before hovering, allowing for a more consistent look across cards with varying title lengths
  • Set a minimum height on the title for a more consistent look across cards with varying title lengths
  • Truncate description to limit the description to a certain number of characters so it doesn't overflow the card
  • Change aspect ratio of images
  • Set object fit of images (cover crops the image to fit the aspect ratio, contain resizes the image to fit inside the aspect ratio)
  • Add a load in animation to the slides (fade in, up, right, down, or left)

products-slider