Skip to main content

Slider

The Slider block allows you to create engaging, interactive image sliders with optional text content and links. Perfect for showcasing featured content, highlighting news items, or creating visual galleries on your website. Specifically, the Slider block allows you to

  • present multiple images in a slideshow format;
  • add titles, descriptions, and links to each slide;
  • choose between different layout options;
  • configure automatic playback; and
  • customise navigation controls.

These functionalities make the Slider block ideal for landing pages.

Adding the Slider Block​

  1. In the WordPress block editor, click the + button to add a new block, or use the left-hand menu.
  2. Search for Slider and select the Slider block.
  3. Once added, you will see a placeholder where you can start adding slides.

Alternatively, you can type /slider on a new line and press enter to add the block.

Each slide consists of:

  • A background image
  • A title (optional)
  • Descriptive text (optional)
  • A link to any URL (optional)
  1. Use the slide selector at the bottom of the block editor to switch between slides.
  2. Click on any slide to make it active for editing.
  3. When a slide is active, you can edit its:
    • Title: Click on the title text to modify it
    • Content: Click on the description text to change it
    • Link: Enter a URL in the sidebar settings

Block Settings​

  1. Layout options
    • Width: Toggle between regular width and full-width display
    • Content Position: Choose to display content either overlaid on the image or in a separate content box
    • Text Alignment: Align text left, center, or right (when content is displayed on the image)
  2. Navigation options
    • Show Navigation Arrows: Toggle the display of left/right navigation arrows
    • Auto Play: Enable automatic slide transitions
    • Auto Play Duration: Set how long each slide is displayed (in seconds) when auto play is enabled
  3. Visual settings
    • Background Color: Customise the background color of the content box (when content is not displayed on the image)
  4. Reordering and managing slides
    • Add Slides: Click the + button in the toolbar or slide selection area
    • Remove Slides: Select a slide and click the Remove option
    • Reorder Slides: Use the up/down arrows in the slide selector to change slide order
  5. Mobile experience
    • The Slider is fully responsive and touch-enabled:
      • Users can swipe left or right to navigate between slides on touch devices
      • Layout automatically adjusts for different screen sizes
  6. Explore button
    • When you add a link to a slide, an Explore button automatically appears, encouraging visitors to click through to the linked content.