Error loading markdown: Could not load file: components/carousel/doc/overview.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/doc/overview.md: 403 Forbidden
PreviousNext
1
2
3
4
5
Error loading markdown: Could not load file: components/carousel/demo/default.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/demo/default.md: 403 Forbidden

Installation

1

Run the CLI

Use the CLI to add the component to your project.

Error loading markdown: Could not load file: /installation/cli/add-carousel.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/installation/cli/add-carousel.md: 403 Forbidden
1

Add the component files

Create the component directory structure and add the following files to your project.

Error loading markdown: Could not load file: /installation/manual/carousel.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/installation/manual/carousel.md: 403 Forbidden

Examples

default

1
2
3
4
5
Error loading markdown: Could not load file: components/carousel/demo/default.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/demo/default.md: 403 Forbidden

dot controls

1
2
3
4
5
Error loading markdown: Could not load file: components/carousel/demo/dot-controls.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/demo/dot-controls.md: 403 Forbidden

orientation

1
2
3
4
5
Error loading markdown: Could not load file: components/carousel/demo/orientation.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/demo/orientation.md: 403 Forbidden

sizes

To set the size of the items, you can use the basis utility class on the <z-carousel-item />.

1
2
3
4
5
Error loading markdown: Could not load file: components/carousel/demo/sizes.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/demo/sizes.md: 403 Forbidden

spacing

To set the spacing between the items, we use a pl-[VALUE] utility on the <z-carousel-item /> and a negative -ml-[VALUE] on the <z-carousel-content />.

1
2
3
4
5
6

Content class: -ml-4

Item class: basis-1/3 pl-4

Error loading markdown: Could not load file: components/carousel/demo/spacing.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/demo/spacing.md: 403 Forbidden

api demo

1
2
3
4
5

Current slide: 1 / 0

Scroll progress: 0%

Can scroll prev: No

Can scroll next: No

Slides in view:

Error loading markdown: Could not load file: components/carousel/demo/api-demo.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/demo/api-demo.md: 403 Forbidden

plugins

1
2
3
4
5

Current slide: 1 / 0

Error loading markdown: Could not load file: components/carousel/demo/plugins.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/demo/plugins.md: 403 Forbidden
Error loading markdown: Could not load file: components/carousel/doc/api.md - Http failure response for http://t-2616093887---zardui-ssr-jltz4frwyq-uk.a.run.app/components/carousel/doc/api.md: 403 Forbidden