How to center slides using embla carousel?

[siamahnaf]

Hello, I use embla carousel like this-

import Image from "next/image";
import useEmblaCarousel from "embla-carousel-react";

//Data
import GalleryData from "@/Data/Gallery.data";

const Carousel = () => {
    const [emblaRef] = useEmblaCarousel({
        align: "center",
        containScroll: "trimSnaps",
        skipSnaps: true
    })
    return (
        <div className="embla overflow-hidden mt-8">
            <div className="embla__viewport" ref={emblaRef}>
                <div className="embla__container flex gap-3">
                    {GalleryData.map((item, i) => (
                        <div
                            className="embla__slide flex-[0_0_25%]"
                            key={i}
                        >
                            <div className={`${i % 2 !== 0 ? "mt-4" : ""}`}>
                                <Image src={item.image1} alt={item.alt1} width={418} height={322} className="mb-3" />
                                <Image src={item.image2} alt={item.alt2} width={418} height={322} />
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default Carousel;

Here I use TailwindCss-

It shows result like this-

But I need to show it initally like this-

[fabz1001]

Hi @siamahnaf,

It's always best to provide a codesandbox for a better and faster help, however, I think I may have spotted the problem.
You need to play with 2 more Embla options in order to achieve the desired result: slidesToScroll and startIndex.

Please give them a try and let us know if it helped. Thanks!

[davidjerleke]

@fabz1001 thanks for the help!

It's always best to provide a codesandbox for a better and faster help

@siamahnaf This is very true. I prioritise questions with a CodeSandbox which is stated in the contribution guidelines.

You need to set startIndex to 2 to achieve what you want.

[siamahnaf]

Yes, I can understand and it's working for me. Thank you very much.