Skip to content

The image slider

Modality documentation

The image slider

Browse the documentation

The slider sits at the top of the front page. Turn it on with Enable Image Slider in Home Page Settings, then set it up in Front Page Sections → Image Slider Settings.

Where the slides come from

Choose Slides come from:

  • Posts with a featured image: the newest posts of the Image Slider Category, up to Number of Slides. Each slide shows the featured image, the post title and the excerpt, and links to the post. Posts without a featured image are skipped. This is how 1.x worked.
  • Pages chosen below: up to five pages (Page for slide 1–5), using each page’s featured image, title and excerpt.
  • Custom slides: up to five slides you write yourself in Front Page Sections → Slider: Custom Slides. A slide needs an image; title, text and button are optional.
Slider: Custom Slides with image, title, text and button fields
Custom slides: an image plus optional title, text, button text and button link.

Look and motion

  • Size: Image Slider Height, and a separate height for phones.
  • Style: Default Image Slider keeps the two 1.x looks: Ideal Image Slider (boxed captions) or Unslider (centered captions). Image Slider Effect is Slide or Fade.
  • Readable captions: Darken images for readable captions adds a dark layer over the images, in percent. Caption colors, width and position are in the same section.
  • Controls: dots, previous/next arrows, and Play automatically with Slideshow Interval in milliseconds.

Accessibility

The slider works with the keyboard (arrow keys, and every button is reachable with Tab), has a pause button while it plays, stops when a visitor hovers over it or moves focus into it, and never plays automatically for visitors whose device asks for reduced motion. Screen readers announce it as a carousel with numbered slides.

Tips

  • Use images at least 1600 px wide, with the important part in the middle; the sides are cropped on phones.
  • One strong slide often works better than five. With a single slide the dots and arrows are hidden.
Back to top