Web Parts
Slider
Rotating banner carousel for featured content with multiple transition animations, configurable click behavior, and auto-play.
ContentFeature Parity: 95%
Get Slider Working in 3 Steps
10-20 minutes
Prerequisites
- Bonzai 2 package installed on your site
- Site Pages with banner images
- Pages tagged with Showcase (or Featured) = "Slider"
1
Add the web part
Edit your page and add "Bonzai Slider" to a full-width section.
2
Choose your data source
Select a site and list, then set the Showcase value (default: Slider). Optionally pre-filter by tags.
3
Configure animation and display
Choose a transition animation, enable auto-play, and set overlay/metadata options.
When to Use This Web Part
Use this when you need to...
- Create a rotating hero banner
- Highlight multiple featured stories
- Display promotional content
- Showcase news highlights
Best page locations
- Homepage — hero carousel
- News center — featured stories
- Event pages — upcoming highlights
Consider alternatives when...
- • Static content — use Landing
- • All news articles — use News Rollup
Related web parts:
Landing — static tile gridSpotlight Rollup — static featured cards
Animation Options
The slider supports multiple transition animations:
- Fade: Smooth fade transition between slides
- Slide: Horizontal slide transition
- Flip X: Horizontal flip animation
- Flip Y: Vertical flip animation
- Rotate: Rotation animation
Auto-Play Settings
- Interval: 2-30 seconds (default: 5 seconds)
- Transition Duration: 1-10 seconds (default: 3 seconds)
- Slide Transition Delay: optional delay before the animation begins — None (instant), 500ms, 1s, 2s, or 3s (default: None)
- Auto Loop: when disabled, navigation stops at the first/last slide and auto-play halts at the end (default: On)
- Pause on hover: automatically pauses when the user hovers the slider; resumes on mouse leave
- Single slide guard: auto-play never starts when there is only one slide
Slide Click Behavior
- Entire Slide Clickable (default): the whole slide acts as a link to the page. It is keyboard-focusable (Enter or Space activates it) and exposes
role="link". - Content Only Clickable: only the title link inside the overlay navigates to the page.
Slide Image Source
The slider chooses images in this order:
- Banner Image (default): uses
overrideImageUrlfrom the Bonzai Page Banner in CanvasContent1 first, then the list-itemBannerImageUrl, then image URLs discovered in CanvasContent1, and finally anxlpreview fromgetpreview.ashx. Best for full-resolution hero imagery. - Thumbnail: fetches
BannerThumbnailUrlfrom the SitePages API and uses it when available, falling back to the Banner Image pipeline otherwise. Lighter weight, good for list-like carousels.
Recent Updates
- New: Date Field control in the Date section lets authors choose which DateTime column drives the displayed date in slide metadata. Auto-populated from the source list's DateTime columns.
- Site picker, list picker, and title icon picker.
- Showcase selector + tag multi-select for curated slides.
- Search and filter UI with metadata toggles (date/author/tags).
- Configurable slide click behavior (content-only vs entire-slide).
- Auto loop toggle + slide transition delay.
- New: slide image source selector — Banner Image (full-resolution hero) vs Thumbnail (auto-generated preview).
- New: image fit mode (cover/contain/fill/none/scale-down) and container padding, border radius, overlay text scale controls.
- New: customizable date format — text/numeric style, long/short month, year order, separator, 2/4-digit year, with live preview.
- Improved: property pane reorganized into pages (General / Behavior / Display / Advanced).
Common Configurations
Copy these ready-to-use configurations:
Homepage Hero
Auto-playing hero carousel
Best for: Homepage
Configuration
| listName | Site Pages |
| showcaseValue | Slider |
| autoPlay | On |
| autoPlayInterval | 5 |
| transitionAnimation | fade |
Static Banner
Manual navigation only
Best for: Landing page
Configuration
| autoPlay | Off |
| showOverlay | On |
| fixedHeight | 400 |
| imageFit | cover |
Dynamic Slide Effect
Slide animation with fast transitions
Best for: News page
Configuration
| transitionAnimation | slide |
| transitionDuration | 2 |
| slideTransitionDelay | 0.5 |
| autoPlayInterval | 4 |
Tagged Highlights
Curated slider items by tag
Best for: News center
Configuration
| showcaseValue | Slider |
| selectedTags | Leadership, Featured |
| showTags | On |
Best Practices
Limit to 3-5 slides
Too many slides reduces engagement. Keep the most important content visible.
Accessibility consideration
Some users prefer to disable auto-play. The slider includes navigation controls for manual browsing.
Reference
Site Pages Schema
Slider reads from Site Pages (fallbacks: Site Pages, SitePages, Pages). Use these columns to curate slider items:
- Create or use the Site Pages library on the source site.
- Add a Showcase column (Choice or Text) and set value Slider on items.
- Optional: add Tags and Category fields for filters.
- Ensure each page has a banner image and is published.
| Column | Type | Required | Notes |
|---|---|---|---|
| Title | Single line of text | Yes | Default Site Pages column — used as the slide headline |
| Banner Image | Image | No | Slide background. The web part also falls back to overrideImageUrl in CanvasContent1, and to an auto-generated thumbnail/preview. |
| Showcase | Choice or Text | Yes | Set to Slider (internal names Showcase, Showcase_x003f_, Featured, and Featured_x003f_ are all recognised) |
| OwlNewsPageCategory / Category | Choice | No | Optional category label shown in the overlay |
| Tags / Enterprise Keywords | Managed Metadata | No | Used for curation (pre-filter) and the optional runtime filter UI |
| Author | Person | No | Standard Author column, shown when showAuthor is on |
| Created / Modified | Date & Time | No | Created date drives ordering and the shown date |
Content type requirement
Slider only returns modern news pages — items whose ContentTypeId starts with
0x0101009D1CB255DA76424F860D91F20E6C4118. Regular Site Pages without that content type are filtered out even if they have a Showcase value.Property Pane Configuration
Property pane pages
Slider settings are organized into four pages: General (title + data source), Behavior (slide behavior + animation/playback),Display (appearance + content display), and Advanced (search/filters + additional settings).
General (Title & Data Source)
| Property | Type | Description |
|---|---|---|
title | Text | Web part title (blank hides header row) |
titleIconOption | Dropdown | Title icon mode: Custom or None |
titleIconName | Icon Picker | Fluent UI icon for the header |
titleIconUrl | Text | Custom icon URL (overrides icon name) |
titleUrl | Text | Optional title link URL |
siteUrlMode | Dropdown | Pick a site or enter a manual URL |
selectedSites | Site Picker | Selected site when using Site Picker |
siteUrl | Text | Manual site URL when Site Selection Mode = manual |
listId | List Picker | Source list (Site Pages) from the selected site |
showcaseValue | Dropdown | Showcase/Featured value used to include items (default: Slider) |
selectedTags | Multi-select | Pre-filter by tags (optional) |
Behavior (Slide Behavior, Animation & Playback)
| Property | Type | Description |
|---|---|---|
slideClickBehavior | Dropdown | Content only clickable, or entire slide clickable (default) |
autoLoop | Toggle | Wrap navigation at boundaries (turn off to stop at first/last slide) |
transitionAnimation | Dropdown | Animation: Fade, Slide, Flip X, Flip Y, Rotate |
transitionDuration | Text (Number) | Transition duration in seconds (1-10) |
slideTransitionDelay | Dropdown | Delay before transition animation begins (0–3s) |
autoPlay | Toggle | Enable auto-rotation (default: On) |
autoPlayInterval | Slider (2-30) | Seconds between slides (default: 5) |
Display — Appearance
| Property | Type | Description |
|---|---|---|
fixedHeight | Slider (0-1000, step 25) | Slider height in pixels (default: 500) |
containerPadding | Slider (0-40, step 2) | Inner padding around the slider in pixels (default: 0) |
borderRadius | Slider (0-20, step 1) | Corner radius for the slider container in pixels (default: 0) |
textScale | Slider (0.7-1.6, step 0.1) | Overlay text scale factor applied via a --slider-text-scale CSS variable (default: 1) |
showOverlay | Toggle | Show dark overlay for text readability (default: On) |
imageFit | Dropdown | Image fit mode — cover (default), contain, fill, none, scale-down. Applied as background-size on slide images. |
slideImageSource | Dropdown | Image source — BannerImage (default, full-resolution hero from Banner Image / CanvasContent1) or Thumbnail (auto-generated preview from BannerThumbnailUrl) |
Display — Content Display
| Property | Type | Description |
|---|---|---|
showDate | Toggle | Show item date (default: On). Reveals date formatting sub-options when enabled. |
showAuthor | Toggle | Show author name (default: Off) |
openInNewTab | Toggle | Open slide links in a new browser tab (default: Off) |
dateFieldName | Dropdown | Which date to display in slide metadata. Default: "" (Auto). Auto-populated from the source list's DateTime columns: starts with Auto, then FirstPublishedDate / Created / Modified, then any non-hidden DateTime column found on the list. |
showCategory | Toggle | Show category label when the field exists (default: On) |
showTags | Toggle | Show tag pills when available (default: Off) |
showExcerpt | Toggle | Show excerpt when the slide has one (default: On) |
showLikes | Toggle | Show likes count when available (default: On) |
showComments | Toggle | Show comments count when available (default: On) |
Display — Date Format (shown when showDate is on)
| Property | Type | Description |
|---|---|---|
dateStyle | Choice | text (e.g. April 9, 2026) or numeric (e.g. 09/04/2026) |
dateMonthFormat | Dropdown | Text style only — long (April) or short (Apr) |
dateShowYear | Toggle | Text style only — include the year |
dateOrder | Dropdown | Numeric style only — DMY, MDY, or YMD |
dateSeparator | Dropdown | Numeric style only — /, -, or . |
dateYearDigits | Dropdown | Numeric style only — 4 (2026) or 2 (26) |
Live date preview
A live preview of the configured date format is shown directly under the date settings in the property pane.
Advanced (Search & Filters, Advanced Settings)
| Property | Type | Description |
|---|---|---|
enableSearch | Toggle | Show an inline search box above the slider (default: Off). Filters by title, category, author, or tags. |
enableFilters | Toggle | Show filter controls above the slider (default: Off) — page type, category, tags, and date-from / date-to pickers. |
description | Text (Multiline) | Optional description for this web part |
helpUrl | Text | Optional link to help documentation |
Features Checklist
- ✅ Multiple transition animations (Fade, Slide, Flip X, Flip Y, Rotate)
- ✅ Configurable auto-play with interval (2-30s)
- ✅ Auto loop toggle (wrap or stop at boundaries)
- ✅ Configurable click behavior (content-only or entire-slide, with keyboard / Enter & Space support)
- ✅ Slide transition delay (0 / 500ms / 1 / 2 / 3s)
- ✅ Pause on hover
- ✅ Navigation controls (dots and arrows)
- ✅ Dark overlay option
- ✅ Site picker or manual URL data source + list picker
- ✅ Showcase-based curation + optional tag pre-filter
- ✅ Runtime search and filter UI (search, page type, category, tags, date-from / date-to)
- ✅ Metadata toggles (category, tags, date, author, excerpt, likes, comments)
- ✅ Customizable date format (text or numeric, month / year / order / separator) with live preview
- ✅ Image fit mode (cover / contain / fill / none / scale-down)
- ✅ Image source selector (Banner Image vs auto-generated Thumbnail)
- ✅ Configurable height, container padding, border radius, and overlay text scale
- ✅ Title icon picker (Fluent UI icon or custom icon URL) and optional title link