Skip to content

component

Carousel 3D Scroll

By Artem Kostenko

Details

Summary

COMPONENT SETTINGS Items Array: Image: Front and back card image Title & Description: Front card text content Back Title & Back Description: Back card text content Link & Link…

Description

COMPONENT SETTINGS Items Array: Image: Front and back card image Title & Description: Front card text content Back Title & Back Description: Back card text content Link & Link Target: Card click destination Button Text, Color, Text Color, Border Radius: Back card button styling Button Hover Color & Hover Text Color: Button hover states Control Mode: Scroll: Rotate carousel by scrolling Drag: Rotate carousel by dragging Easing Stiffness & Damping: Drag mode animation smoothness Back Card Overlay: Back Overlay Color: Overlay color on back card image Back Overlay Opacity: Overlay transparency (0-1) Back Overlay Blur: Background blur effect (0-50px) Back Content Opacity: Content visibility when not flipped (0-1) Hover Effects: Hover Effect: None or Zoom Zoom Amount: Scale multiplier on hover (1-1.5) 3D Layout: Radius: Carousel circle radius (200-1000px) Item Width & Height: Card dimensions (200-800px) Perspective: 3D depth effect (500-3000px) Rotation: Auto Rotate: Enable automatic rotation Auto Speed: Rotation speed when auto-rotating (0.1-5) Scroll Speed: Rotation speed in scroll mode (0.1-5) Direction: Clockwise or Counterclockwise Styling: Background: Component background color Card Background: Card background color Card Radius: Card corner radius (0-50px) Shadow Color & Size: Card shadow styling Image Settings: Image Height: Image area percentage (30-100%) Image Fit: Cover, Contain, or Fill Image Padding: Padding around image (0-50px) Info Display: Show Info: Toggle text content visibility Info Position: Bottom, Top, Overlay Bottom, or Overlay Top Info Padding: Text area padding (0-50px) Info Gap: Space between title and description (0-30px) Title Color & Description Color: Text colors Title Font & Description Font: Typography settings Button Styling: Button Font: Button typography settings Card Flip: Flip Enabled: Enable click-to-flip functionality Flip Direction: Horizontal or Vertical flip animation TAGS: 3d carousel, scroll carousel, drag carousel, card flip, interactive gallery, perspective carousel, rotating cards, image slider, product showcase, portfolio gallery.

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600163418/148/228/309/79/15
  • All · #6305