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.
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
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
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/
Check out the Research Group template for an example Slider section.
You may also be interested in the Hero widget or adding the Gallery shortcode within a Blank widget.