Skip to content

Latest commit

 

History

History
57 lines (42 loc) · 2.33 KB

README.md

File metadata and controls

57 lines (42 loc) · 2.33 KB

🎥 Interactive Video Carousel

Project Overview

I created a dynamic video carousel using HTML, CSS, JavaScript, and jQuery. 🌟 This project showcases responsive web design principles to deliver an engaging multimedia experience across devices. 📱 The combination of Owl Carousel for seamless transitions and Plyr for advanced video playback features ensures a smooth, user-friendly interface. 🎉

Tech Stack

  • HTML 🏗️: For structure
  • CSS 🎨: For styling and animations
  • JavaScript 🤖: For interactivity
  • jQuery 💡: To simplify DOM manipulation and event handling

Responsive Design

Adapts beautifully to all screen sizes, from desktops to mobile devices. 📱📺 Responsive breakpoints and flexible layouts ensure a consistent user experience. 📏

Key Features

  • Smooth Video Playback 🎬: Integrated with Plyr for intuitive video controls.
  • Seamless Navigation 🕹️: Utilizes Owl Carousel for effortless navigation between videos.
  • Loading Animation 🔄: A sleek loader ensures a polished interface from the start.

Installation and Setup

To run this project locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/DeveloperVaibhav1/Video_Carousel_1.git

  2. Navigate to the project directory:

    cd Video_Carousel_1

  3. Open index.html in your browser to view the project.

Usage

  • Add your video files to the video_container directory.
  • Modify the index.html file to update the video sources if necessary.

Contributing

Contributions are welcome! Feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgements

Contact

🚀 This project was a fantastic learning experience and a testament to the power of modern web development tools. Looking forward to leveraging these skills in future projects! 🌟