Skip to content
Snippets Groups Projects
Commit c8fe920c authored by Julien MARGAIL's avatar Julien MARGAIL
Browse files

Merge branch 'feat/carousel' into 'main' 

maj component carousel

See merge request onegeo/gatsby-theme-onegeo!40
parents 4945ae32 979f72c4
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 @ c8fe920c
...@@ -121,9 +121,7 @@ interface DataImage { ...@@ -121,9 +121,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 @ c8fe920c
...@@ -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 @ c8fe920c
...@@ -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