Climbing Routes Slider - Copy this Html, Tailwind Component to your project

"Generate a responsive image slider using Tailwind CSS and Swiper.js. The design should replicate the following: Full width slider with coverflow effect. Each slide has a background image, rounded corners, shadow, and smooth hover/active transition. On each slide, display an overlay info box at the bottom with 5 labeled details (Climber, Photo, Route, Sector, Zone). The info box should have a semi transparent gradient background (black overlay) and appear with a slide up animation when the slide becomes active. Each detail (span) should align left, have small uppercase text, light color, padding with an icon like shape before it. Pagination bullets should be rounded, inactive bullets in gray, active bullet in yellow (#ffc107) with elongated pill shape. Responsive breakpoints: 320px → 1.5 slides 580px → 2 slides 767px → 3 slides 992px → 3.5 slides 1200px → 4 slides 1400px → 4.5 slides Use Tailwind utilities for spacing, flex, grid, background, text, colors, and responsiveness. Output should be pure Tailwind + Swiper.js (no custom CSS except necessary inline styles for gradient effects)."