This project is a responsive, interactive music playlist slider built with HTML, CSS, and JavaScript. It presents a curated selection of songs using a card-based slider interface, with accompanying song details and player controls.
The Playlist Slider consists of a horizontally scrolling card interface that displays album artwork for each song. Selecting a card updates the currently displayed track information, such as title, artist, and duration. A popup modal introduces the playlist to the user.
- Interactive card slider for navigating songs
- Dynamic song details (title, artist, duration)
- Visual playback controls (previous, pause, next)
- Optional "favorite" button
- Responsive layout for mobile and desktop
- Modal introduction message on page load
Download the project files or clone the repository:
git clone https://github.com/your-username/playlist-slider.git
cd playlist-sliderOpen index.html in any modern web browser to view the project.
index.html– The main HTML layout and structurestyles.css– Styles for layout, typography, and animationsscript.js– Handles modal behavior and player interactions
You can easily modify the project by:
- Changing album artwork (update image URLs or use local assets)
- Editing song metadata (title, artist, and duration)
- Modifying modal text for personalization
This project is licensed under the MIT License. See the LICENSE file for details.