URL Carousel

A kiosk-style web application that automatically cycles through websites in a fullscreen iframe. Designed for digital signage, dashboard displays, and multi-page presentations. Features smooth fade transitions with logo display between pages.

Features

• Automatic Cycling – Switches between URLs on a configurable timer
• Smooth Transitions – Fade to white with centered logo between page changes
• Fully Configurable – All settings controlled via a single JavaScript file
• Power BI Optimized – Special handling for Power BI embedded reports
• Content Cropping – Hide unwanted portions of embedded pages
• Random Mode – Option to display URLs in random order
• Zero Dependencies – Runs entirely in the browser with no build process required

Quick Start

1. Clone or download this repository
2. Add your logo file (e.g., logo.png) to the project folder
3. Edit config.js with your URLs and settings
4. Open index.html in a web browser (double-click works)

No server required.

Configuration

All settings are controlled via config.js:

const CONFIG = {
  "urls": [
    "https://example.com",
    "https://app.powerbi.com/reportEmbed?reportId=..."
  ],

  "timing": {
    "interval": 30,
    "autoStart": true,
    "randomOrder": false
  },

  "transition": {
    "enabled": true,
    "fadeInDuration": 500,
    "logoDisplayDuration": 1000,
    "fadeOutDuration": 500,
    "backgroundColor": "#ffffff"
  },

  "logo": {
    "enabled": true,
    "src": "logo.png",
    "maxWidth": 400,
    "maxHeight": 400
  },

  "display": {
    "cropBottom": 120,
    "backgroundColor": "#000000"
  },

  "powerbi": {
    "chromeless": true,
    "hideNavPane": true,
    "hideFilterPane": true
  },

  "loading": {
    "showSpinner": true,
    "spinnerColor": "#4f46e5",
    "textColor": "#666666",
    "text": "Loading page..."
  },

  "error": {
    "showRetryButton": true,
    "textColor": "#dc2626",
    "message": "Failed to load page"
  }
};

Configuration Reference

urls

Array of URLs to cycle through. Supports any embeddable webpage.

timing

Setting	Type	Default	Description
interval	number	30	Seconds to display each page
autoStart	boolean	true	Start cycling automatically on load
randomOrder	boolean	false	Display URLs in random order

transition

Setting	Type	Default	Description
enabled	boolean	true	Enable fade transitions
fadeInDuration	number	500	Fade in time (milliseconds)
logoDisplayDuration	number	1000	Logo display time (milliseconds)
fadeOutDuration	number	500	Fade out time (milliseconds)
backgroundColor	string	"#ffffff"	Transition overlay color

logo

Setting	Type	Default	Description
enabled	boolean	true	Show logo during transitions
src	string	"logo.png"	Path to logo file
maxWidth	number	400	Maximum logo width (pixels)
maxHeight	number	400	Maximum logo height (pixels)

display

Setting	Type	Default	Description
cropBottom	number	120	Pixels to hide from page bottom
backgroundColor	string	"#000000"	Page background color

powerbi

Setting	Type	Default	Description
chromeless	boolean	true	Hide Power BI chrome
hideNavPane	boolean	true	Hide navigation pane
hideFilterPane	boolean	true	Hide filter pane

loading

Setting	Type	Default	Description
showSpinner	boolean	true	Show loading spinner
spinnerColor	string	"#4f46e5"	Spinner color
textColor	string	"#666666"	Loading text color
text	string	"Loading page..."	Loading message

error

Setting	Type	Default	Description
showRetryButton	boolean	true	Show retry button on error
textColor	string	"#dc2626"	Error text color
message	string	"Failed to load page"	Default error message

File Structure

url_carousel/
├── index.html      # Main HTML file
├── style.css       # Styles
├── script.js       # Application logic
├── config.js       # Configuration
├── logo.png        # Your logo file
└── README.md       # This file

Power BI Embed URLs

This app is optimized for displaying Power BI reports. To get an embed URL:

Getting the Embed URL

1. Open your report in Power BI Service (app.powerbi.com)
2. Click File → Embed report → Website or portal
3. Copy the URL from the embed code (the src attribute of the iframe)

The URL should look like:

https://app.powerbi.com/reportEmbed?reportId=XXXX-XXXX-XXXX&autoAuth=true&ctid=XXXX-XXXX-XXXX

URL Parameters

Parameter	Description
reportId	The unique ID of your report
autoAuth	Enables automatic authentication
ctid	Your tenant ID
pageName	(Optional) Display a specific page by name
filter	(Optional) Apply filters via URL

Example URLs

// Basic embed URL
"https://app.powerbi.com/reportEmbed?reportId=abc123&autoAuth=true&ctid=xyz789"

// With specific page
"https://app.powerbi.com/reportEmbed?reportId=abc123&autoAuth=true&ctid=xyz789&pageName=ReportSection1"

Automatic Enhancements

The app automatically adds these parameters based on your powerbi config settings:

• chromeless=1 - Removes Power BI header/footer
• navContentPaneEnabled=false - Hides the page navigation pane
• filterPaneEnabled=false - Hides the filter pane

Requirements

• Report must be published to Power BI Service
• Users viewing the carousel must have access to the report
• For public displays, consider using "Publish to web" (if data is not sensitive)

Browser Compatibility

Works in all modern browsers:

• Chrome / Chromium
• Firefox
• Safari
• Edge

Notes

• Some websites block iframe embedding via security headers (X-Frame-Options, CSP)
• Power BI reports require appropriate sharing/embedding permissions
• The cropBottom setting is useful for hiding footers or unwanted UI elements
• Settings changes require a page refresh to take effect

Troubleshooting

Page won't load

• Check if the website allows iframe embedding
• Verify the URL is correct and accessible
• For Power BI, ensure the report has appropriate embed permissions

Transition not working

• Ensure transition.enabled is true
• Check that your logo file exists at the specified path

Content cut off incorrectly

• Adjust the display.cropBottom value (0 to disable cropping)

License

MIT License - Feel free to use and modify for your projects.

Author

Created by Thomas Linthwaite