Trending Now - Netflix Style Carousel
Detailed Prompt for Netflix Like Carousel with Trending Section and Hover Effects Carousel Overview: Create a horizontal carousel similar to Netflix’s, featuring a "Trending" section. The carousel displays a series of movie/TV show thumbnails, each with an overlay of the title and interactive elements (play button and info button). Clicking a thumbnail opens a modal with more details or navigates to a new page. Specifications: Container Size: Width: 100% of the viewport Height: 250px (adjustable for your design) Scroll Behavior: Allow horizontal scrolling with a smooth transition effect. On click, the carousel should scroll to the next five items smoothly. Thumbnail Details: Each thumbnail should have: Image: Aspect ratio of 16:9 (e.g., 300x169 pixels) Overlay: Semi transparent black overlay covering the entire thumbnail when hovered. Title Text: Centered title at the bottom of the thumbnail, initially displayed in white, turning yellow on hover. Action Buttons: Play Button: Initially hidden; appears on hover with a subtle zoom effect. Style: Circular shape with a white icon on a dark background. Info Button: Initially hidden; appears on hover with a subtle scale up effect. Style: Circular shape with a white icon on a dark background. Hover Effects: On hovering over a thumbnail: Image Zoom: The thumbnail image slightly enlarges (e.g., scale to 1.05). Overlay Appearance: The overlay fades in smoothly (e.g., opacity: 0 to opacity: 0.7 over 0.3 seconds). Title text color changes to yellow. Buttons: Both the play and info buttons become visible, each with a smooth slide up transition from the bottom. Play button animates with a scale effect to attract attention. Info button animates with a subtle pulse effect. Responsive Design: For desktop (≥ 1024px): Show 5 thumbnails at once. For tablets (≥ 768px): Show 3 thumbnails at once. For mobile devices (< 768px): Show 1 thumbnail at once. Styling: Use a dark background similar to Netflix. Thumbnails should have a consistent margin between them (e.g., 10px). Ensure fonts and icons are consistent with the Netflix aesthetic. JavaScript Functionality: Implement an event listener for the scroll buttons (next/prev) that moves the carousel by 5 thumbnails per click. Ensure scrolling is smooth (use scroll behavior: smooth;). Trending Section: At the top of the carousel, display the title “Trending Now” in bold, large font. Include a loading spinner when fetching data (if using an API) or display placeholder images initially. Sample Data Structure: Use an array of objects for the trending movies/TV shows, each containing: json Copy code [ { "id": 1, "title": "Movie Title 1", "imageUrl": "https://linktoimage1.com", "trailerUrl": "https://linktotrailer1.com", "description": "Brief description of the movie." }, { "id": 2, "title": "Movie Title 2", "imageUrl": "https://linktoimage2.com", "trailerUrl": "https://linktotrailer2.com", "description": "Brief description of the movie." } // Add more movies as needed ] Additional Notes: Consider implementing lazy loading for images to improve performance. Use a library like Swiper.js or React Slick for easier carousel implementation. Ensure accessibility features, such as keyboard navigation and ARIA labels, are included. Test the hover effects across different devices and browsers to ensure a consistent user experience.
