Skip to content

Commit

Permalink
fix(carousel): carousel size depends on parent size (#241)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rluders
rluders authored Jun 21, 2022
1 parent 43f890b commit 279eab4
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 50 deletions.
90 changes: 50 additions & 40 deletions src/docs/pages/CarouselPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,55 +8,63 @@ const CarouselPage: FC = () => {
{
title: 'Default carousel',
code: (
<Carousel>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
<div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
<Carousel>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
</div>
),
},
{
title: 'Sliding interval',
code: (
<Carousel slideInterval={5000}>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
<div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
<Carousel slideInterval={5000}>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
</div>
),
},
{
title: 'Static carousel',
code: (
<Carousel slide={false}>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
<div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
<Carousel slide={false}>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
</div>
),
},
{
title: 'Custom Controls',
code: (
<Carousel leftControl="left" rightControl="right">
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
<div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
<Carousel leftControl="left" rightControl="right">
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
</div>
),
},
{
title: 'Indicators',
code: (
<div className="grid grid-cols-2 gap-4">
<div className="grid h-56 grid-cols-2 gap-4 sm:h-64 xl:h-80 2xl:h-96">
<Carousel>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
Expand All @@ -77,17 +85,19 @@ const CarouselPage: FC = () => {
{
title: 'Slide as anything',
code: (
<Carousel>
<div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
Slide 1
</div>
<div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
Slide 2
</div>
<div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
Slide 3
</div>
</Carousel>
<div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
<Carousel>
<div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
Slide 1
</div>
<div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
Slide 2
</div>
<div className="flex h-full items-center justify-center bg-gray-400 dark:bg-gray-700 dark:text-white">
Slide 3
</div>
</Carousel>
</div>
),
},
];
Expand Down
16 changes: 9 additions & 7 deletions src/lib/components/Carousel/Carousel.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ export default {
} as Meta;

const Template: Story<CarouselProps> = (args) => (
<Carousel {...args}>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
<div className="h-56 sm:h-64 xl:h-80 2xl:h-96">
<Carousel {...args}>
<img src="https://flowbite.com/docs/images/carousel/carousel-1.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-2.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-3.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-4.svg" alt="..." />
<img src="https://flowbite.com/docs/images/carousel/carousel-5.svg" alt="..." />
</Carousel>
</div>
);

export const Default = Template.bind({});
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Carousel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ export const Carousel: FC<CarouselProps> = ({

const items = useMemo(
() =>
Children.map(children as ReactElement<ComponentProps<'img'>>[], (child: ReactElement<ComponentProps<'img'>>) =>
Children.map(children as ReactElement[], (child: ReactElement) =>
cloneElement(child, {
className: theme.item.base,
className: classNames(theme.item.base, child.props.className),
}),
),
[children, theme.item.base],
Expand Down
2 changes: 1 addition & 1 deletion src/lib/theme/default.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ export default {
},
},
carousel: {
base: 'relative h-full w-full h-56 sm:h-64 xl:h-80 2xl:h-96',
base: 'relative h-full w-full',
indicators: {
active: {
off: 'bg-white/50 hover:bg-white dark:bg-gray-800/50 dark:hover:bg-gray-800',
Expand Down

0 comments on commit 279eab4

Please sign in to comment.