Skip to content
Snippets Groups Projects
Commit 979f72c4 authored by Tojo's avatar Tojo
Browse files

maj component carousel

parent 3805c13b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.d.ts
+ 0
− 2
View file @ 979f72c4
...@@ -116,9 +116,7 @@ interface DataImage { ...@@ -116,9 +116,7 @@ interface DataImage {
} }
interface ICarousel { interface ICarousel {
images: Array<DataImage> images: Array<DataImage>
isLogo: boolean
delay?: number delay?: number
fullSize?: boolean
} }
export function Carousel(props: ICarousel): JSX.Element export function Carousel(props: ICarousel): JSX.Element
......
src/components/core/Carousel.tsx
+ 25
− 65
View file @ 979f72c4
...@@ -6,13 +6,11 @@ interface DataImage { ...@@ -6,13 +6,11 @@ interface DataImage {
interface Props { interface Props {
images: Array<DataImage> images: Array<DataImage>
isLogo: boolean
delay?: number delay?: number
fullSize?: boolean
} }
const Carousel = (props: Props) => { const Carousel = (props: Props) => {
const { images, isLogo, delay, fullSize } = props const { images, delay } = props
const [index, setIndex] = useState(1) const [index, setIndex] = useState(1)
const nbr_image: number = images.length const nbr_image: number = images.length
...@@ -42,86 +40,48 @@ const Carousel = (props: Props) => { ...@@ -42,86 +40,48 @@ const Carousel = (props: Props) => {
}) })
return ( return (
<div <div className={`flex items-center `}>
className={`block relative ${ <div className="relative">
isLogo <div className="btn-carousel absolute z-50 left-3 -mt-5">
? "flex items-center w-1/2 box-content float-none" <button
: "flex items-center" onClick={() => updateIndex(index - 1)}
}`} className={`bg-neutral rounded-3xl w-10 h-10 text-base-100`}
> >
<div className="btn-carousel"> ❮
<button </button>
onClick={() => updateIndex(index - 1)} </div>
className={`bg-neutral rounded-3xl ${
isLogo ? "w-5" : "w-10 absolute z-10 left-2"
} h-10 text-base-100`}
>
❮
</button>
</div> </div>
<div <div
className={`inline-block align-middle carousel ${ className={`inline-block align-middle carousel w-full truncate max-h-80`}
isLogo ? "w-1/2 ml-2 mr-2" : "w-full"
} truncate`}
> >
<div <div
className={`whitespace-nowrap ${ className={`whitespace-nowrap w-full `}
isLogo ? (fullSize ? "w-full" : "w-4/12") : "w-full"
} `}
style={{ style={{
transform: isLogo transform: `translateX(-${index * 100}%)`,
? nbr_image > 2
? fullSize
? `translateX(-${index * 100}%)`
: `translateX(-${index * 60}%)`
: `translateX(0)`
: `translateX(-${index * 100}%)`,
transition: "transform 0.3s", transition: "transform 0.3s",
}} }}
> >
{images.map((item: any, key: any) => { {images.map((item: any, key: any) => {
return ( return (
<div <div
className={`carousel-item relative w-full inline-block ${ className={`carousel-item relative w-full inline-block mr-0`}
isLogo
? fullSize
? "mr-0"
: "mr-5"
: "mr-0"
}`}
key={key} key={key}
> >
{isLogo ? ( <Image image={item.src} className="w-full" />
<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"
/>
)}
</div> </div>
) )
})} })}
</div> </div>
</div> </div>
<div className="btn-carousel"> <div className="relative">
<button <div className="btn-carousel absolute z-50 right-3 -mt-5">
onClick={() => updateIndex(index + 1)} <button
className={`bg-neutral rounded-3xl ${ onClick={() => updateIndex(index + 1)}
isLogo ? "w-5" : "w-10 absolute z-10 right-2" className={`bg-neutral rounded-3xl w-10 h-10 text-base-100`}
} h-10 text-base-100`} >
> ❯
❯ </button>
</button> </div>
</div> </div>
</div> </div>
) )
......
src/pages-doc/doc/core/carousel.tsx
+ 11
− 8
View file @ 979f72c4
...@@ -6,16 +6,16 @@ import { Content,Link, Carousel } from "@onegeo/gatsby-theme-onegeo" ...@@ -6,16 +6,16 @@ import { Content,Link, Carousel } from "@onegeo/gatsby-theme-onegeo"
const carousel = () => { const carousel = () => {
const dataImage = [ 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 ( return (
...@@ -35,9 +35,7 @@ interface DataImage { ...@@ -35,9 +35,7 @@ interface DataImage {
interface Props { interface Props {
images: Array<DataImage>; images: Array<DataImage>;
isLogo: boolean;
delay?: number; delay?: number;
fullSize?: boolean
} }
const dataImage = [ const dataImage = [
...@@ -64,8 +62,13 @@ interface DataImage { ...@@ -64,8 +62,13 @@ interface DataImage {
<h2>Example</h2> <h2>Example</h2>
</div> </div>
<Carousel images={dataImage} isLogo={false} delay={3000} /> <div className="">
<Carousel images={dataImage} isLogo={true} delay={2000} fullSize={true}/> <Carousel images={dataImage} delay={3000} />
</div>
<div className="mt-5">
<Carousel images={dataImage} delay={6000} />
</div>
</Content> </Content>
) )
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment