Web Parts
Slider
Rotating banner carousel for featured content with multiple transition animations 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)
- Pause on hover: Automatically pauses when user hovers
Recent Updates
- 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).
Common Configurations
Copy these ready-to-use configurations:
Homepage Hero
Auto-playing hero carousel
Best for: Homepage
Configuration
| List | Site Pages |
| Showcase Value | Slider |
| autoPlay | On |
| autoPlayInterval | 5 |
| transitionAnimation | fade |
Static Banner
Manual navigation only
Best for: Landing page
Configuration
| autoPlay | Off |
| showOverlay | On |
| fixedHeight | 400 |
Dynamic Slide Effect
Slide animation with fast transitions
Best for: News page
Configuration
| transitionAnimation | slide |
| transitionDuration | 2 |
| autoPlayInterval | 4 |
Tagged Highlights
Curated slider items by tag
Best for: News center
Configuration
| Showcase Value | Slider |
| Filter Tags | Leadership, Featured |
| Show Tags | 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 |
| Banner Image | Image | No | Used for slide background |
| Showcase | Choice or Text | Yes | Set to Slider (Featured/PromotedState also supported) |
| Category | Choice | No | Optional category label |
| Tags | Managed Metadata | No | Enterprise Keywords / Tags for filters |
| Description | Multiple lines | No | Used for overlay excerpt if enabled |
Property Pane Configuration
Main Settings
| 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) |
transitionAnimation | Dropdown | Animation: Fade, Slide, Flip X, Flip Y, Rotate |
transitionDuration | Text (Number) | Transition duration in seconds (1-10) |
fixedHeight | Slider (200-800) | Slider height in pixels (default: 500) |
textScale | Slider | Scale the overlay text size (percent) |
autoPlay | Toggle | Enable auto-rotation (default: On) |
autoPlayInterval | Slider (2-30) | Seconds between slides (default: 5) |
showOverlay | Toggle | Show dark overlay for text readability (default: On) |
showDate | Toggle | Show published/modified date |
showAuthor | Toggle | Show author |
showCategory | Toggle | Show category label when the field exists |
showTags | Toggle | Show tags when available |
showExcerpt | Toggle | Show excerpt/description |
showLikes | Toggle | Show likes count when available |
showComments | Toggle | Show comments count when available |
enableSearch | Toggle | Show search box |
enableFilters | Toggle | Show filter controls (tags, page type, date range) |
Advanced Settings
| Property | Type | Description |
|---|---|---|
description | Text (Multiline) | Web part description |
helpUrl | Text | Help documentation URL |
titleUrl | Text | Optional URL to make the title clickable |
Features Checklist
- ✅ Multiple transition animations (Fade, Slide, Flip X, Flip Y, Rotate)
- ✅ Configurable auto-play with interval
- ✅ Pause on hover
- ✅ Navigation controls (dots and arrows)
- ✅ Dark overlay option
- ✅ Showcase-based curation + optional tag pre-filter
- ✅ Search and filter UI (search, tags, page type, date range)
- ✅ Metadata toggles (date, author, tags, likes, comments)
- ✅ Configurable height