Slider

Promote a lot of content in a small space with a slider (carousel). Users can click the left and right arrows to move between slides, or you can automate slide transitions with a timer.

Customization

The content for each slide is added to the page front matter. A title and content can be set for each slide - Markdown formatting and emojis can be used. The content of each slide can be left, center, or right aligned.

Optionally, a call-to-action (CTA) button can be added to a slide to encourage visitors to perform an action. The snippet below provides an example of using the link option to add a CTA button to a slide.

Customize each slide with a background color (color) or image (media) by referencing an image filename in assets/media/.

For image backgrounds, you can choose a focal point position, such as center or right to help ensure the region of interest in the image is visible across all devices and screen sizes.

Want to automatically scale an image to fit within a slide? Change the fit option in the example below from cover to contain.

To help ensure the text is easily readable, you can adjust the image brightness. The text color for slides is always white unless it is overrided using custom CSS styling.

To show the widget in a section, reference it in your section’s front matter:

widget: slider  # Use the Slider widget as this page section
weight: 1  # Position of this section on the page
active: true  # Publish this section?
headless: true  # This file represents a page section.

design:
  # Slide height is automatic unless you force a specific height (e.g. '400px')
  slide_height: ''
  is_fullscreen: true
  # Automatically transition through slides?
  loop: false
  # Duration of transition between slides (in ms)
  interval: 2000

content:
  slides:
    - title: 👋 Welcome to the group
      content: Take a look at what we're working on...
      align: center
      background:
        position: right
        color: '#666'
        brightness: 0.7
        media: coders.jpg
        fit: cover
    - title: Lunch & Learn ☕️
      content: 'Share your knowledge with the group and explore exciting new topics together!'
      align: left
      background:
        position: center
        color: '#555'
        brightness: 0.7
        media: contact.jpg
        fit: cover
    - title: World-Class Semiconductor Lab
      content: 'Just opened last month!'
      align: right
      background:
        position: center
        color: '#333'
        brightness: 0.5
        media: welcome.jpg
        fit: cover
      link:
        icon: graduation-cap
        icon_pack: fas
        text: Join Us
        url: ../contact/

Examples

Check out the Research Group template for an example Slider section.

See Also

You may also be interested in the Hero widget or adding the Gallery shortcode within a Blank widget.