Schema-only template for a image comparison slider component.

Introduction

An image comparison slider displays two images side by side with a draggable handle to highlight visual differences.

It is commonly used to showcase before-and-after states, product improvements, or transformations and is typically placed in feature sections or case studies to enhance visual storytelling by emphasizing contrast and impact.

Personalizing the images, such as adapting visuals to match user segments or contexts, and testing different placements or default positions can improve engagement and make the content more relatable and effective.

Usage

To add this component to your workspace, run:

npx croct@latest use croct://ui/component/image-comparison-slider
Other templates from
CroctCroct
A Next.js project with Croct integration.
Next.js + Croct starter

A Next.js project with Croct integration.

CroctCroct
A Next.js project with Shadcn UI and Croct integration.
Shadcn UI + Croct starter

A Next.js project with Shadcn UI and Croct integration.

CroctCroct
An announcement bar with a location-based message.
Geomarketing strategy

An announcement bar with a location-based message.

CroctCroct
Component template for a carousel section.
Carousel section

Component template for a carousel section.

CroctCroct

Start building in seconds

Paste the following command in your terminal and let the CLI do the rest.

npx croct@latest init