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.
slider.md section in the demo uses the Slider widget. Set
active: true in its front matter to view the section.
Each slide is defined as an
item in the section 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
cta_* options to add a CTA button to a slide.
Customize each slide with a background color (
overlay_color) or image (
overlay_img) by referencing an image filename in
assets/media/. 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 headless: true # This file represents a page section. # ... Put Your Section Options Here (section position etc.) ... # Slide interval. # Use `false` to disable animation or enter a time in ms, e.g. `5000` (5s). interval: false # Minimum slide height. # Specify a height to ensure a consistent height for each slide. height: 300px item: - title: Hello content: 'I am center aligned 😄' # Choose `center`, `left`, or `right` alignment. align: center # Overlay a color or image (optional). # Deactivate an option by commenting out the line, prefixing it with `#`. overlay_color: '#666' # An HTML color value. overlay_img: bubbles.jpg # Image path relative to your `assets/media/` folder overlay_filter: 0.5 # Darken the image. Value in range 0-1. # Call to action button (optional). # Activate the button by specifying a URL and button label below. # Deactivate by commenting out parameters, prefixing lines with `#`. cta_label: Download my app cta_url: 'https://example.org' cta_icon_pack: fas cta_icon: graduation-cap - title: Left content: 'I am left aligned 😄' align: left overlay_color: '#555' overlay_img: '' overlay_filter: 0.5 - title: Right content: 'I am right aligned 😄' align: right overlay_color: '#333' overlay_img: '' overlay_filter: 0.5
You may also be interested in the Hero widget.