Carousel Slider

A card carousel with gesture support and animated rotation and scaling. It shows images in a circular layout with interactive transitions. Users can swipe left or right to navigate between slides. It is ideal for displaying a set of images or items in a visually engaging way.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/carousel-slider

npx layro-cli add @watermeloncorp/carousel-slider

npx layro-cli add @watermeloncorp/carousel-slider

bunx layro-cli add @watermeloncorp/carousel-slider

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import React, { useState } from "react";
import {
  motion,
  AnimatePresence,
  useMotionValue,
  useTransform,
  type PanInfo,
  type Variants,
} from "motion/react";
import { HugeiconsIcon } from "@hugeicons/react";
import { FavouriteIcon } from "@hugeicons/core-free-icons";