Vertical Circular Carousel - Pure CSS & JavaScript Image Rotator
Vertical Circular Carousel – Pure CSS & JavaScript Image Rotator
Vertical Circular Carousel is a lightweight, modern image carousel that arranges your images along a circular path and rotates them vertically. Built with pure HTML, CSS and vanilla JavaScript, it requires no external dependencies or build tools and works out of the box in any modern browser.
The carousel uses cutting‑edge CSS features (custom properties, motion paths) to create a smooth, continuous vertical rotation. On hover, the active image smoothly enlarges while the other items fade to grayscale, drawing the user’s attention to the focused slide.
Features
- Pure front‑end: HTML + CSS + vanilla JavaScript, no libraries required
- Circular vertical layout: images are positioned along a perfect circle and rotate vertically
- Hover focus effect: hovered image zooms in, non‑hovered items become grayscale
- Customizable via CSS variables:
- rotation direction and speed
- item size and hover zoom amount
- transition duration and overall carousel radius
- Responsive by design: adapts to viewport size using modern CSS units
- Clean, well‑commented code: configuration points are documented in English directly in the source
- Easy integration: copy the gallery block and include the CSS/JS files into any existing page
Use cases
- Portfolio and photography showcases
- Creative hero sections and landing pages
- Visual menus, artwork galleries or product previews
What’s included
-
index.html– demo page with a ready‑to‑use carousel -
style.css– all carousel styles with clear configuration comments -
script.js– minimal initialization logic (no frameworks) -
documentation/index.html– full English documentation with setup and customization guide
Drop in your own images, tweak a few CSS variables, and you have a unique, eye‑catching vertical circular carousel ready for production.