48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import useEmblaCarousel from "embla-carousel-react";
|
|
import Image from "next/image";
|
|
import "./carousel.css";
|
|
import Autoplay from "embla-carousel-autoplay";
|
|
import AutoHeight from "embla-carousel-auto-height";
|
|
|
|
export const EmblaCarousel = () => {
|
|
const [emblaRef] = useEmblaCarousel({ loop: false }, [Autoplay()]);
|
|
|
|
return (
|
|
<div className="embla" ref={emblaRef}>
|
|
<div className="embla__container w-full">
|
|
<div className="embla__slide relative w-full">
|
|
<Image
|
|
src="/img01.webp"
|
|
alt="/"
|
|
fill
|
|
style={{ objectFit: "cover", objectPosition: 'center' }} // optional
|
|
quality={100}
|
|
/>
|
|
</div>
|
|
<div className="embla__slide relative w-full">
|
|
{" "}
|
|
<Image
|
|
src="/IMG_2431.jpg"
|
|
alt="/"
|
|
fill
|
|
style={{ objectFit: "cover", objectPosition: 'center' }} // optional
|
|
quality={100}
|
|
/>
|
|
</div>
|
|
<div className="embla__slide relative w-full">
|
|
{" "}
|
|
<Image
|
|
src="/images/bar01.jpg"
|
|
alt="/"
|
|
fill
|
|
style={{ objectFit: "cover", objectPosition: 'center' }} // optional
|
|
quality={100}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|