diff --git a/index.d.ts b/index.d.ts
index a2be549b96c079a72e5abe04cf4aecc9dd5a6469..0ff26420f3aba8153a97f5a3fd54165d2ddbe3b3 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -121,9 +121,7 @@ interface DataImage {
}
interface ICarousel {
images: Array<DataImage>
- isLogo: boolean
delay?: number
- fullSize?: boolean
}
export function Carousel(props: ICarousel): JSX.Element
diff --git a/src/components/core/Carousel.tsx b/src/components/core/Carousel.tsx
index 6edc9c0ae9d3dfeca91e034f414ba90a0bd50f5d..b2b793ac265604a559818ff86139e69dc9bc7992 100644
--- a/src/components/core/Carousel.tsx
+++ b/src/components/core/Carousel.tsx
@@ -6,13 +6,11 @@ interface DataImage {
interface Props {
images: Array<DataImage>
- isLogo: boolean
delay?: number
- fullSize?: boolean
}
const Carousel = (props: Props) => {
- const { images, isLogo, delay, fullSize } = props
+ const { images, delay } = props
const [index, setIndex] = useState(1)
const nbr_image: number = images.length
@@ -42,86 +40,48 @@ const Carousel = (props: Props) => {
})
return (
- <div
- className={`block relative ${
- isLogo
- ? "flex items-center w-1/2 box-content float-none"
- : "flex items-center"
- }`}
- >
- <div className="btn-carousel">
- <button
- onClick={() => updateIndex(index - 1)}
- className={`bg-neutral rounded-3xl ${
- isLogo ? "w-5" : "w-10 absolute z-10 left-2"
- } h-10 text-base-100`}
- >
- â®
- </button>
+ <div className={`flex items-center `}>
+ <div className="relative">
+ <div className="btn-carousel absolute z-50 left-3 -mt-5">
+ <button
+ onClick={() => updateIndex(index - 1)}
+ className={`bg-neutral rounded-3xl w-10 h-10 text-base-100`}
+ >
+ â®
+ </button>
+ </div>
</div>
<div
- className={`inline-block align-middle carousel ${
- isLogo ? "w-1/2 ml-2 mr-2" : "w-full"
- } truncate`}
+ className={`inline-block align-middle carousel w-full truncate max-h-80`}
>
<div
- className={`whitespace-nowrap ${
- isLogo ? (fullSize ? "w-full" : "w-4/12") : "w-full"
- } `}
+ className={`whitespace-nowrap w-full `}
style={{
- transform: isLogo
- ? nbr_image > 2
- ? fullSize
- ? `translateX(-${index * 100}%)`
- : `translateX(-${index * 60}%)`
- : `translateX(0)`
- : `translateX(-${index * 100}%)`,
+ transform: `translateX(-${index * 100}%)`,
transition: "transform 0.3s",
}}
>
{images.map((item: any, key: any) => {
return (
<div
- className={`carousel-item relative w-full inline-block ${
- isLogo
- ? fullSize
- ? "mr-0"
- : "mr-5"
- : "mr-0"
- }`}
+ className={`carousel-item relative w-full inline-block mr-0`}
key={key}
>
- {isLogo ? (
- <div
- className={`flex justify-center items-center ${
- fullSize ? "w-full" : "w-full h-28"
- } `}
- >
- <Image
- image={item.src}
- className="w-full border border-gray-600"
- />
- </div>
- ) : (
- <Image
- image={item.src}
- className="w-full"
- />
- )}
+ <Image image={item.src} className="w-full" />
</div>
)
})}
</div>
</div>
- <div className="btn-carousel">
- <button
- onClick={() => updateIndex(index + 1)}
- className={`bg-neutral rounded-3xl ${
- isLogo ? "w-5" : "w-10 absolute z-10 right-2"
- } h-10 text-base-100`}
- >
- â¯
- </button>
+ <div className="relative">
+ <div className="btn-carousel absolute z-50 right-3 -mt-5">
+ <button
+ onClick={() => updateIndex(index + 1)}
+ className={`bg-neutral rounded-3xl w-10 h-10 text-base-100`}
+ >
+ â¯
+ </button>
+ </div>
</div>
</div>
)
diff --git a/src/pages-doc/doc/core/carousel.tsx b/src/pages-doc/doc/core/carousel.tsx
index 81e917e05c50005b341d969fa22806e04f5a0c30..58b6bccd2b63072a94d04c48ead429b1c42a07d7 100644
--- a/src/pages-doc/doc/core/carousel.tsx
+++ b/src/pages-doc/doc/core/carousel.tsx
@@ -6,16 +6,16 @@ import { Content,Link, Carousel } from "@onegeo/gatsby-theme-onegeo"
const carousel = () => {
const dataImage = [
{
- src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
+ src: "https://placeimg.com/800/200/arch",
},
{
- src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
+ src: "https://placeimg.com/800/200/arch",
},
{
- src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
+ src: "https://placeimg.com/800/200/arch",
},
{
- src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
+ src: "https://placeimg.com/800/200/arch",
},
]
return (
@@ -35,9 +35,7 @@ interface DataImage {
interface Props {
images: Array<DataImage>;
- isLogo: boolean;
delay?: number;
- fullSize?: boolean
}
const dataImage = [
@@ -64,8 +62,13 @@ interface DataImage {
<h2>Example</h2>
</div>
- <Carousel images={dataImage} isLogo={false} delay={3000} />
- <Carousel images={dataImage} isLogo={true} delay={2000} fullSize={true}/>
+ <div className="">
+ <Carousel images={dataImage} delay={3000} />
+ </div>
+ <div className="mt-5">
+ <Carousel images={dataImage} delay={6000} />
+ </div>
+
</Content>
)
}