Carousel Clickable Links

Overview

PoshUI carousels now support per-slide clickable links with background images. Each carousel slide can have its own URL that opens in the default browser when the user clicks the "Learn More →" button.

Features

Per-Slide URLs: Each carousel slide can have a unique LinkUrl
Clickable Control: Toggle clickability per slide with the Clickable property
Background Images: Add images to carousel slides with opacity control
Auto-Rotation: Automatically rotate through slides with configurable intervals
Visual Feedback: "Learn More →" button appears only on clickable slides
Cross-Module Support: Works in Wizard, Workflow, and Dashboard modules

Supported Modules

Wizard Module (PoshUI.Wizard)

Parameter: -CarouselItems
Use with: Add-UIBanner

Workflow Module (PoshUI.Workflow)

Parameter: -CarouselItems
Use with: Add-UIBanner

Dashboard Module (PoshUI.Dashboard)

Parameter: -CarouselSlides
Use with: Add-UIBanner
Note: Requires -Title parameter

Carousel Slide Properties

Each carousel slide is a hashtable with the following properties:

Property	Type	Required	Default	Description
`Title`	String	No	`''`	Main title text displayed on the slide
`Subtitle`	String	No	`''`	Secondary text below the title
`Description`	String	No	`''`	Additional descriptive text
`BackgroundColor`	String	No	`#2D2D30`	Hex color code (e.g., `#0078D4`)
`BackgroundImagePath`	String	No	`''`	Path to background image file
`BackgroundImageOpacity`	Double	No	`0.3`	Image opacity (0.0 to 1.0). Use `1.0` for fully visible images
`BackgroundImageStretch`	String	No	`Uniform`	Image stretch mode: `Uniform` (centered), `UniformToFill` (fills banner), `Fill`, `None`
`IconPath`	String	No	`''`	Path to PNG/ICO icon file displayed beside slide text (v1.3.0)
`IconSize`	Integer	No	`64`	Icon width/height in pixels (v1.3.0)
`IconColor`	String	No	`#40FFFFFF`	Tint color for glyph icons (v1.3.0)
`IconPosition`	String	No	`Right`	Icon position: `Left` or `Right` (v1.3.0)
`TitleFontSize`	String	No	`32`	Title font size in pixels
`SubtitleFontSize`	String	No	`16`	Subtitle font size in pixels
`TitleFontWeight`	String	No	`Bold`	Title font weight
`LinkUrl`	String	No	`''`	URL to open when slide is clicked
`Clickable`	Boolean	No	`$false`	Enable/disable clickability

Usage Examples

Basic Carousel (Wizard/Workflow)

powershell

$carouselItems = @(
    @{
        Title = 'Welcome'
        Subtitle = 'Get started with PoshUI'
        BackgroundColor = '#0078D4'
        LinkUrl = 'https://github.com/Kanders-II/PoshUI'
        Clickable = $true
    },
    @{
        Title = 'Documentation'
        Subtitle = 'Learn more about features'
        BackgroundColor = '#107C10'
        LinkUrl = 'https://docs.microsoft.com/powershell'
        Clickable = $true
    }
)

Add-UIBanner -Step "Welcome" `
    -CarouselItems $carouselItems `
    -AutoRotate $true `
    -RotateInterval 5000 `
    -Height 180

Carousel with PNG Icons (Dashboard) (v1.3.0)

powershell

$iconBase = Join-Path $PSScriptRoot 'Assets\Icons'

$carouselSlides = @(
    @{
        Title = 'Performance Dashboard'
        Subtitle = 'Real-time system monitoring with visual indicators'
        BackgroundColor = '#1B3A57'
        IconPath = (Join-Path $iconBase 'icons8-graph-100.png')
        LinkUrl = 'https://kanders-ii.github.io/PoshUI/'
        Clickable = $true
    },
    @{
        Title = 'Gauge Controls'
        Subtitle = 'Radial gauges show metrics at a glance'
        BackgroundColor = '#DC2626'
        IconPath = (Join-Path $iconBase 'icons8-stopwatch-100.png')
    },
    @{
        Title = 'Sparkline Charts'
        Subtitle = 'Compact trend visualization in cards'
        BackgroundColor = '#4A5568'
        IconPath = (Join-Path $iconBase 'icons8-stocks-growth-100.png')
    }
)

Add-UIBanner -Step "PerformanceMetrics" -Name "PerfBanner" `
    -Title "Performance Metrics" `
    -CarouselSlides $carouselSlides `
    -AutoRotate $true `
    -RotateInterval 4000 `
    -Height 180

Carousel with Background Images (Dashboard)

powershell

$logoPath = Join-Path $PSScriptRoot 'Logo Files\png\Color logo - no background.png'

$carouselSlides = @(
    @{
        # Image-only slide (no text, no link)
        BackgroundImagePath = $logoPath
        BackgroundImageOpacity = 1.0
        BackgroundImageStretch = 'Uniform'
    },
    @{
        # Text slide with subtle background image
        Title = 'Dashboard Analytics'
        Subtitle = 'Monitor your infrastructure'
        BackgroundColor = '#107C10'
        BackgroundImagePath = $logoPath
        BackgroundImageOpacity = 0.1
        LinkUrl = 'https://docs.microsoft.com/powershell'
        Clickable = $true
    }
)

Add-UIBanner -Step "Overview" `
    -Title "Dashboard" `
    -CarouselSlides $carouselSlides `
    -AutoRotate $true `
    -RotateInterval 5000 `
    -Height 180

Note: Default BackgroundImageOpacity is 0.3 (30% visible). Set to 1.0 for fully visible images.

Carousel Parameters

AutoRotate

Type: Boolean
Default: $false
Description: Enable automatic slide rotation

RotateInterval

Type: Integer (milliseconds)
Default: 3000
Range: 1000-10000
Description: Time between slide transitions

Height

Type: Integer (pixels)
Default: 180
Description: Carousel banner height

NavigationStyle (Dashboard only)

Type: String
Values: Dots, Arrows, None
Default: Dots
Description: Navigation control style

Visual Behavior

Clickable Slides

Display a "Learn More →" button in the bottom-right corner
Button has semi-transparent dark background with white border
Hover effect darkens the background
Clicking opens the LinkUrl in the default browser

Non-Clickable Slides

No "Learn More →" button is displayed
Slides can still be navigated using carousel controls

Implementation Details

C# Classes

BannerSlide (Launcher\ViewModels\BannerViewModel.cs)

csharp

[DataMember]
public string LinkUrl { get; set; } = string.Empty;

[DataMember]
public bool Clickable { get; set; } = false;

public bool HasLink
{
    get { return Clickable && !string.IsNullOrEmpty(LinkUrl); }
}

XAML Binding

The "Learn More →" button binds to:

Command: OpenSlideLinkCommand
CommandParameter: CurrentSlide.LinkUrl
Visibility: Controlled by CurrentSlide.HasLink

Command Handler

OpenSlideLinkCommand in BannerViewModel.cs:

csharp

OpenSlideLinkCommand = new RelayCommand(param => OpenSlideLink(param?.ToString()));

private void OpenSlideLink(string url)
{
    if (string.IsNullOrEmpty(url)) return;
    
    try
    {
        System.Diagnostics.Process.Start(new System.Diagnostics.ProcessStartInfo
        {
            FileName = url,
            UseShellExecute = true
        });
    }
    catch (Exception ex)
    {
        LoggingService.Error($"Failed to open URL '{url}': {ex.Message}", 
            component: "BannerViewModel");
    }
}

Examples

Wizard-AllControls.ps1

Demonstrates carousel with 3 slides
Slides 2 and 3 have clickable links
First slide has no link (Clickable = $false)

Workflow-Reboot.ps1

Demonstrates carousel in workflow context
All 3 slides are clickable
Auto-rotates every 4 seconds

Dashboard-MultiPageDashboard.ps1

Demonstrates carousel with background images
All 3 slides are clickable
Uses -CarouselSlides parameter (Dashboard-specific)
Auto-rotates every 5 seconds

Troubleshooting

Carousel Not Displaying

Ensure at least 2 slides are provided
Check that CarouselItems or CarouselSlides parameter is used
Verify slide properties are correctly formatted as hashtables

Links Not Working

Verify Clickable = $true is set on the slide
Check that LinkUrl is a valid URL
Ensure the URL includes the protocol (e.g., https://)
Check application logs for error messages

Background Images Not Showing

Verify BackgroundImagePath points to an existing file
Check file permissions
Adjust BackgroundImageOpacity if image is too faint
Try different BackgroundImageStretch values

Carousel Not Auto-Rotating

Ensure AutoRotate = $true is set
Verify RotateInterval is within valid range (1000-10000 ms)
Check that carousel has at least 2 slides

Logging

Carousel operations are logged to the PoshUI log file at:

%LOCALAPPDATA%\PoshUI\Logs\PoshUI_*.log

Look for messages containing:

"Opening URL: ..." - When a link is clicked
"Successfully opened URL: ..." - Successful URL opening
"Failed to open URL: ..." - URL opening errors
"Carousel slide: ..." - Slide properties during initialization

Performance Considerations

Background images should be optimized for web use (compressed, reasonable dimensions)
Large images may impact carousel responsiveness
Opacity values between 0.1 and 0.3 work best for subtle backgrounds
Auto-rotation intervals below 2000ms may feel too fast for users

Compatibility

PowerShell Version: 5.1+ (Windows PowerShell) or 7.4+ (PowerShell Core)
Operating System: Windows 7+ (Framework 4.8) or Windows 10/11 (Core)
Modules: All three PoshUI modules (Wizard, Workflow, Dashboard)

Carousel Clickable Links ​

Overview ​

Features ​

Supported Modules ​

Wizard Module (PoshUI.Wizard) ​

Workflow Module (PoshUI.Workflow) ​

Dashboard Module (PoshUI.Dashboard) ​

Carousel Slide Properties ​

Usage Examples ​

Basic Carousel (Wizard/Workflow) ​

Carousel with PNG Icons (Dashboard) (v1.3.0) ​

Carousel with Background Images (Dashboard) ​

Carousel Parameters ​

AutoRotate ​

RotateInterval ​

Height ​

NavigationStyle (Dashboard only) ​

Visual Behavior ​

Clickable Slides ​

Non-Clickable Slides ​

Implementation Details ​

C# Classes ​

XAML Binding ​

Command Handler ​

Examples ​

Wizard-AllControls.ps1 ​

Workflow-Reboot.ps1 ​

Dashboard-MultiPageDashboard.ps1 ​

Troubleshooting ​

Carousel Not Displaying ​

Links Not Working ​

Background Images Not Showing ​

Carousel Not Auto-Rotating ​

Logging ​

Performance Considerations ​

Compatibility ​

Carousel Clickable Links

Overview

Features

Supported Modules

Wizard Module (PoshUI.Wizard)

Workflow Module (PoshUI.Workflow)

Dashboard Module (PoshUI.Dashboard)

Carousel Slide Properties

Usage Examples

Basic Carousel (Wizard/Workflow)

Carousel with PNG Icons (Dashboard) (v1.3.0)

Carousel with Background Images (Dashboard)

Carousel Parameters

AutoRotate

RotateInterval

Height

NavigationStyle (Dashboard only)

Visual Behavior

Clickable Slides

Non-Clickable Slides

Implementation Details

C# Classes

XAML Binding

Command Handler

Examples

Wizard-AllControls.ps1

Workflow-Reboot.ps1

Dashboard-MultiPageDashboard.ps1

Troubleshooting

Carousel Not Displaying

Links Not Working

Background Images Not Showing

Carousel Not Auto-Rotating

Logging

Performance Considerations

Compatibility