Responsive Dashboard with Music Player | Swiper Cube Slider | HTML CSS Javascript
In this project, you'll see how to create a responsive dashboard with a music player synchronized with a Swiper slider. It demonstrates how to integrate Swiper's cube effect slider and event listeners with a custom audio player, allowing smooth transitions between slides and songs. Key features include a progress bar tracking playback, volume control, shuffle functionality, and playlist synchronization. You'll also see how to highlight the active playlist item, control audio playback, and update Swiper slides programmatically.
📂 Resources:
1) Getting Started with Swiper: https://swiperjs.com/get-started
2) CDN for Font Awesome: https://cdnjs.com/libraries/font-awesome
3) Font Awesome Icons: https://fontawesome.com/icons
🏞️ The images are designed by Freepik: https://www.freepik.com
⭐Lists:
Swiper JS: • Swiper JS
GSAP: • GSAP
Slider with Vanilla Javascript & CSS: • Slider with Vanilla Javascript & CSS
Background Animation: • Background Animation
CSS Hover Effect: • CSS Hover Effect
👩💻 My Social Profiles:
X: https://x.com/ecemgo
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 Timestamps:
0:00 – Intro
1:32 – HTML
6:03 – Beginning of the CSS
7:06 – Dashboard style
7:40 – Sidebar
8:16 – Content (right side of dashboard)
8:50 – Slider & playlist items
10:00 – Album container & albums
10:50 – Player controls
12:32 – Beginning of the Javascript
12:34 – Function for sidebar navigation items
12:54 – Enabling horizontal scroll for the album container
14:18 – Swiper cube slider
14:40 – Synchronizing slider with music player
14:50 – Highlighting the active song in the playlist
15:14 – Functions to pause and play the song and update icons
15:32 – Function to load and play the selected song, highlight the active song
16:08 – Function to toggle play pause
16:24 – Selecting a song from the playlist
17:10 – Functions to play the next or previous song
17:53 – Event listeners for the progress bar
19:31 – Turning the volume down and up
19:55 – Activating shuffle button
20:32 – Activating like buttons
21:24 – Function to swipe the cube slider manually