Scroll X Carousel

Carousel that transforms on the x-axis, showing items depnding on the scroll position, with a progress indicator (optional).

Open in 21st dev

Type

Agency

Services

brandingdesign

UI UX design

We build a car rental platform for the masses, with a focus on user experience and security, and data privacy.

Type

blockchain

Services

brandingdesigndevelopment

Blockchain wallet

We build a Blockchain wallet for the masses, with a focus on security and usability.

Type

ecommerce

Services

brandingdesignpayment getawaydevelopment

ecommerce store

We build an ecommerce store for the masses, with a focus on performance and user experience.

Type

SaaS

Services

brandingdesigndevelopment

SaaS platform

We build a SaaS platform for the masses, with a focus on user experience and security, and data privacy.

Type

SaaS

Services

brandingdesigndevelopment

SEO Optimization

We build a SaaS platform for the masses, with a focus on user experience and security, and data privacy.

Installation

Usage

<ScrollXCarousel className="h-[150vh]">
  <ScrollXCarouselContainer className="h-dvh place-content-center flex flex-col gap-8 py-12">
    <ScrollXCarouselWrap className="flex-4/5 flex space-x-8 [&>*:first-child]:ml-8">
      {SLIDES.map((slide) => (
        <CardHoverReveal
          key={slide.id}
          className="min-w-[70vw] md:min-w-[38vw] shadow-xl border xl:min-w-[30vw] rounded-xl"
        >
          <CardHoverRevealMain>
            <img
              alt={slide.title}
              src={slide.imageUrl}
              className="size-full aspect-square object-cover"
            />
          </CardHoverRevealMain>
          <CardHoverRevealContent className="space-y-4 rounded-2xl bg-[rgba(0,0,0,.5)] backdrop-blur-3xl p-4">
            <div className="space-y-2">
              <h3 className="text-sm text-white/80">Type</h3>
              <div className="flex flex-wrap gap-2">
                <Badge className="capitalize rounded-full">{slide.type}</Badge>
              </div>
            </div>
            <div className="space-y-2">
              <h3 className="text-sm text-white/80">Services</h3>
              <div className="flex flex-wrap gap-2">
                {slide.services.map((service) => (
                  <Badge
                    key={service}
                    className="capitalize rounded-full"
                    variant={'secondary'}
                  >
                    {service}
                  </Badge>
                ))}
              </div>
            </div>

            <div className="space-y-2 mt-2">
              <h3 className="text-white capitalize font-medium">
                {slide.title}
              </h3>
              <p className="text-white/80 text-sm">{slide.description}</p>
            </div>
          </CardHoverRevealContent>
        </CardHoverReveal>
      ))}
    </ScrollXCarouselWrap>
    <ScrollXCarouselProgress
      className="bg-secondary mx-8 h-1 rounded-full overflow-hidden"
      progressStyle="size-full bg-primary/70 rounded-full"
    />
  </ScrollXCarouselContainer>
</ScrollXCarousel>