[Help]: How can I track the selected index using ShadcnUI?

[Adamkaram]

Summary

how i can achieve this behavior with embla i tried so hard and this what i got so far but no luck in determining which slide is active right now
video-convert-1718731899028.webm

"use client"

import React, { useEffect, useCallback } from "react";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import "animate.css"; // Import animate.css styles
import Autoplay from "embla-carousel-autoplay";
import { EmblaCarouselType, EmblaEventType } from "embla-carousel";
import useEmblaCarousel from "embla-carousel-react";
import Image from 'next/image'


export default function Home() {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false })

  useEffect(() => {
    if (emblaApi) {
      console.log(emblaApi.slideNodes()) // Access API
    }
  }, [emblaApi])

  return (
    <Carousel
    orientation="vertical"

    opts = {{
      align: "start",
      loop: true,
      skipSnaps: false,
    }}
      plugins={[
        Autoplay({
          delay: 1000,
        }),
      ]}
    >
      <CarouselContent className="-mt-1 h-[570px]">
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index} className="pt-1 md:w-[90%]">
            <div>
                <CardContent className={`p-1  flex items-center justify-center p-6${
                emblaApi && emblaApi.selectedScrollSnap() === index
                  ? "animate__animated animate__bounce animate__faster"
                  : ""
              }`}>
                <Image
      src="/card-front.webp"
      width={500}
      height={500}
      alt="Picture of the author"
    />
                </CardContent>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
}

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

i'm using shadcn which is completely based on embla on it's core

CodeSandbox example

No response

[davidjerleke]

Hi @Adamkaram,

Thanks for your question. You're mixing the Shadcn carousel logic with the bare Embla library logic. Shadcn is a layer on top of Embla so you should use their API instead.

I would recommend you to access the Embla API as demonstrated here in the Shadcn docs using the setApi prop:

"use client"

import React, { useState, useEffect, useCallback } from "react";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import "animate.css"; // Import animate.css styles
import Autoplay from "embla-carousel-autoplay";
import Image from 'next/image'

export default function Home() {
  const [api, setApi] = useState()
  const [selectedIndex, setSelectedIndex] = useState(0)
 
  const updateSelectedIndex = useCallback((api) => {
    setSelectedIndex(api.selectedScrollSnap())
  }, [])
 
  useEffect(() => {
    if (!api) return

    updateSelectedIndex() // Update index on mount
 
    api
      .on("select", updateSelectedIndex) // Update index when it changes: https://www.embla-carousel.com/api/events/#select
      .on("reInit", updateSelectedIndex) // Update index when the carousel re-mounts: https://www.embla-carousel.com/api/events/#reinit
  }, [api])

  return (
    <Carousel
      setApi={setApi /* Set the carousel API when it's ready */}
      orientation="vertical"
      opts = {{
        align: "start",
        loop: true,
        skipSnaps: false,
      }}
      plugins={[
        Autoplay({ delay: 1000 }),
      ]}
    >
      <CarouselContent className="-mt-1 h-[570px]">
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index} className="pt-1 md:w-[90%]">
            <div>
                <CardContent className={`p-1  flex items-center justify-center p-6${
                selectedIndex === index
                  ? "animate__animated animate__bounce animate__faster"
                  : ""
              }`}>
                <Image
      src="/card-front.webp"
      width={500}
      height={500}
      alt="Picture of the author"
    />
                </CardContent>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
}

[Adamkaram]

yes i mixed between them , igot this error

[Adamkaram]

here u are

https://codesandbox.io/p/devbox/keen-wilson-cqn47m?workspaceId=3e9a3666-db3b-45a4-81dc-b378f874f913

also i fix that issue but with no luck to achieve the bouncing

[davidjerleke]

@Adamkaram you need to make the CodeSandbox public, otherwise I can't access it.

[Adamkaram]

here u are

https://codesandbox.io/p/devbox/keen-wilson-cqn47m?workspaceId=3e9a3666-db3b-45a4-81dc-b378f874f913

sorry about that i didn't notice

[davidjerleke]

@Adamkaram I have no idea what you want to do at this point. Weren't you supposed to use the Shadcn carousel? Because the CodeSandbox you've shared is using the Embla library directly?

[Adamkaram]

i've mixed both of them , i've reached my point at this time
but i can't find how to control the previous and next craousel to do somthing with it like bouncing but in other direction
to feel like the one in the middle bouncing on them so that they look like smooth action like get.store site carousel
is there's any way to deal with that prvious and next carousel ?

[Adamkaram]

yes i did it there was a space typo

p-6${
                selectedIndex === index
                  ? "animate__animated animate__bounce animate__faster"
                  : ""
              }`}

should be

p-6 ${
                selectedIndex === index
                  ? "animate__animated animate__bounce animate__faster"
                  : ""
              }`}

code 1 lead to this class p6animate__animated ..etc hence what come after dosen't matter and it not will be working

[Adamkaram]

full code

"use client"

import React, { useState, useEffect, useCallback } from "react";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import "animate.css"; // Import animate.css styles
import Autoplay from "embla-carousel-autoplay";
import Image from 'next/image'
import { type CarouselApi } from "@/components/ui/carousel"

export default  () => {
  const [api, setApi] = React.useState<CarouselApi>()
  const [selectedIndex, setSelectedIndex] = useState(0)
  console.log(selectedIndex)
 
  const updateSelectedIndex = useCallback((api : any) => {
    setSelectedIndex(api.selectedScrollSnap())
  }, [])
  useEffect(() => {
    if (!api) return

    updateSelectedIndex(api) // Update index on mount
 
    api
      .on("select", updateSelectedIndex) // Update index when it changes: https://www.embla-carousel.com/api/events/#select
      .on("reInit", updateSelectedIndex) // Update index when the carousel re-mounts: https://www.embla-carousel.com/api/events/#reinit
  }, [api])

  return (
    <Carousel
      setApi={setApi /* Set the carousel API when it's ready */}
      orientation="vertical"
      opts = {{
        align: "start",
        loop: true,
        skipSnaps: false,
      }}
      plugins={[
        Autoplay({ delay: 2000 }),
      ]}
    >
      <CarouselContent className="-mt-1 h-[500px] ">
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index} className="pt-1 md:w-[90%]">
            <div>
                <CardContent className={`p-1  flex items-center justify-center p-6 ${
                selectedIndex  === index 
                  ? "animate__animated animate__bounce "
                  : ""
              }`}>
                <Image
      src="/Header/card-front.webp"
      width={100}
      height={100}
      alt="Picture of the author"
    />
            
                </CardContent>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
    </Carousel>
  );
}

[Adamkaram]

can we also add new feature (Virtual slides)
or freefly slides like this