Hossain Jahed

Image Swiper

Cards 845

About

A dynamic and interactive React image swiper component that displays images as a stack of cards with a smooth, perspective-based swipe animation. Users can swipe through images with touch or mouse gestures. Highly customizable and easy to integrate. Tinder like swipe

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Swiper to your project and fits it to your theme.

Code

How Image Swiper is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { ImageSwiper  } from "@/components/ui/image-swiper";

function DemoOne() {
  const imageUrls = "https://cdn.21st.dev/assets/mirror/08/084ef05eff73624edd17cf59fc5f4cc5951da39cb8c3393491b9eec0f0c331fb.jpg";

  return (
    <div className="flex items-center justify-center min-h-screen">
      <ImageSwiper images={imageUrls} />
    </div>
  );
}

export { DemoOne };

More by Hossain Jahed

View all
  • Spotlight Card

    Spotlight Card

    8.9K
  • Motion Footer

    Motion Footer

    5.7K
  • Cinematic landing Hero

    Cinematic landing Hero

    5.7K
  • Sign In

    Sign In

    4.6K
  • AI prompt Box

    AI prompt Box

    3K
  • Glassmorphism Trust Hero

    Glassmorphism Trust Hero

    2.8K
  • Limelight Nav

    Limelight Nav

    2K
  • Ai chat input

    Ai chat input

    1.8K

More in Cards

View all
  • Course Design Cards

    Course Design Cards

    1.1K
  • Statistics Card 7

    Statistics Card 7

    301
  • Statistics Card 2

    Statistics Card 2

    272
  • Stats cards with links

    Stats cards with links

    82
  • Interactive Tech Stack Bento Grid with Hover Effects

    Interactive Tech Stack Bento Grid with Hover Effects

    184
  • Card Studio

    Card Studio

    35
  • Card

    Card

    70
  • Card

    Card

    18