Urgent - Pure CSS & JS Image Carousel with Timer Navigation
Budget: £20 – £250 GBP
I require a responsive and visually engaging image slider/carousel with text overlays. The carousel will feature a unique navigation system: buttons with a transitioning background that visually indicates the time remaining before the next slide transition.
Key features include:
Image and Text Slides: Each slide will display a background image with overlaid text.
Timer Navigation Buttons: Custom navigation buttons located at the bottom left of the image. These buttons will have a background transition effect that functions as a visual timer for the automatic slide rotation.
Pause Button: A button to pause and resume the automatic slide rotation.
"View All" Button: A button (acting as a link) to navigate to a separate page.
Overlay Navigation: All navigation elements (timer buttons, pause, view all) must overlay the main image in the bottom left corner.
Example Provided: I can provide a visual example to clearly illustrate the desired functionality and design.
Strict Requirements:
Pure CSS and JavaScript: The solution must be built using only vanilla CSS and JavaScript. No frameworks or libraries are permitted.
Limited Scope: The delivered solution must include exactly three slides with placeholder background images and text of your choosing.
Mobile Responsiveness: The carousel must function flawlessly on mobile devices. I will provide a specific mobile design for implementation.
Rapid Delivery: The completed project must be delivered within 24 to 48 hours from project award. Do not apply if you cannot strictly adhere to this deadline.
Communication and Progress: You must be readily contactable and able to provide demonstrations of work-in-progress (WIP) upon request.
To Apply:
Please confirm that you can meet all the strict requirements, including the rapid delivery timeframe and the use of pure CSS and JavaScript. Include a brief explanation of your approach to building this carousel and your availability for communication.
Key features include:
Image and Text Slides: Each slide will display a background image with overlaid text.
Timer Navigation Buttons: Custom navigation buttons located at the bottom left of the image. These buttons will have a background transition effect that functions as a visual timer for the automatic slide rotation.
Pause Button: A button to pause and resume the automatic slide rotation.
"View All" Button: A button (acting as a link) to navigate to a separate page.
Overlay Navigation: All navigation elements (timer buttons, pause, view all) must overlay the main image in the bottom left corner.
Example Provided: I can provide a visual example to clearly illustrate the desired functionality and design.
Strict Requirements:
Pure CSS and JavaScript: The solution must be built using only vanilla CSS and JavaScript. No frameworks or libraries are permitted.
Limited Scope: The delivered solution must include exactly three slides with placeholder background images and text of your choosing.
Mobile Responsiveness: The carousel must function flawlessly on mobile devices. I will provide a specific mobile design for implementation.
Rapid Delivery: The completed project must be delivered within 24 to 48 hours from project award. Do not apply if you cannot strictly adhere to this deadline.
Communication and Progress: You must be readily contactable and able to provide demonstrations of work-in-progress (WIP) upon request.
To Apply:
Please confirm that you can meet all the strict requirements, including the rapid delivery timeframe and the use of pure CSS and JavaScript. Include a brief explanation of your approach to building this carousel and your availability for communication.