skills.rest
sreejithraman
sreejithramanCOMMUNITY
Explore all skills by this author →
GitHub

coverflow

Configure Swiper coverflow rotation limits to prevent slide flipping.

Updated Aug 23, 2026
Search Tags:#UX#3d#rotation#carousel#coverflow#swiper
One-click install
npx skills add https://github.com/sreejithraman/shayna --skill coverflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coverflow
Source: https://github.com/sreejithraman/shayna/tree/main/.claude/skills/coverflow
Command: npx skills add https://github.com/sreejithraman/shayna --skill coverflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coverflow carousels with aggressive rotations flip slides and cause UX issues. This Skill outlines safe rotation limits and Swiper configuration to avoid flipping.

Core Features & Use Cases

  • Rotation Formula: rotate × distance_from_center with safety bound
  • View Limits: slidesPerView cap to keep max_rotation < 90°
  • Scroll Handling: prevent page scroll during coverflow interaction
  • Use Case: Implement a coverflow gallery that centers slides without flipping distant items.

Quick Start

Initialize a Swiper coverflow with slidesPerView 5 and rotate 20, plus a wheel handler to prevent page scroll.