A modern, lightweight, and responsive Swiper carousel for Emby and Jellyfin.
This project replaces the default home screen library view with an interactive, dynamic banner slider — perfect for showcasing your latest and most popular media.
Emby Home Swiper UI is a responsive banner module for Emby Web (tested on version 4.9.1.80).
It uses native Emby APIs to display auto‑sliding content on the home page (#!/home) with minimal setup and no external dependencies.
Original inspiration:
- Nolovenodie/emby-crx
- Adapted for Jellyfin/Emby with custom enhancements.
-
Locate your Emby Web UI folder:
- Standard install (Synology):
/volume1/@appstore/EmbyServer/system/dashboard-ui/ - Docker install (lovechen/embyserver):
Find it with:
/system/dashboard-ui/docker exec -it <container_id> find -name "index.html"
- Standard install (Synology):
-
Download required files from GitHub: From Emby-Home-Swiper-UI home-sider-v1 , copy: From Emby-Home-Swiper-UI home-swiper-v2 , copy:
home.js(main swiper logic)style.css(optional styling)- Any additional assets referenced in
home.js
-
Edit
index.html: Insert before</head>:<!-- Emby Home Swiper UI --> <script src="home.js"></script>
-
Refresh Emby Web Interface: Restart Emby or refresh the browser. The banner should now appear on the home page (
#!/home). -
Optional Debugging:
- Open browser console (
F12) and check for errors. - Manually test:
HomeSwiper.init()
- Open browser console (
-
Download the script
- From home-sider-v1
- From home-swiper-v2
-
Place in Emby environment
Copyhome.jsinto your Emby server’s custom scripts or plugin folder. -
Inject into dashboard
Add this line to your Emby dashboard HTML or use a browser extension like Tampermonkey:<script src="/path/to/home.js"></script>
This project provides a simple, lightweight, and responsive banner component with native Emby API support.
Designed for performance and usability, it includes auto‑sliding functionality, navigation controls, and error handling.
| Feature | Description |
|---|---|
| Simple & Lightweight | No external libraries required, minimal footprint |
| Native API Support | Uses ApiClient from Emby 4.9.1.80 → 4.9.3.0 (tested and verified) |
| Auto-sliding Banner | Rotates every 8 seconds automatically |
| Navigation Controls | Includes previous/next buttons for manual navigation |
| Indicator Dots | Clickable dots for direct navigation |
| Responsive Design | Works seamlessly on both desktop and mobile |
| Hover Pause | Rotation pauses when hovered for better user control |
| Error Handling | Graceful fallback if images or API requests fail |
| Lazy Loading | Loads images only when needed, improving performance |
- Open browser console (
F12) and check for errors. - Test Emby API availability:
console.log(ApiClient)
- Confirm you’re on the correct route:
#!/home - Manually initialize the swiper:
HomeSwiper.init()
The uninitialized functions (saveUser, renderMediaFolders) suggest a separate settings component where users can manage library visibility for the carousel.
This code relies on global objects like ApiClient and require(["toast"]), common in the Emby/Jellyfin environment, to handle saving user preferences.
- ✅ Emby Web Version 4.9.5.0
- ✅ Chrome, Firefox, Edge
- ✅ Mobile and desktop views
- Issues and pull requests are welcome.
- If you find bugs or want to suggest improvements, please open an issue or PR.
📬 Contact via Mail: sohag1192@gmail.com
📬 Contact via Telegram: Md_Sohag_Rana
If you enjoy this project, please ⭐ it on GitHub — your support motivates future updates!