Carousel
Overview
Carousel is a good way to show multiple contents in one place by alterning between them via a navigation-like. Best example is gallery photos from ecommerce product detail. AstroPine’s Carousel provide properties which will enabled you to deal with many customization cases. Here below are some examples of what you can achieved with this component:
Default Carousel
By default, Carousel is aligned horizontally with navigation button in the middle and each one to the opposite side. Slides are images. We will see further that you can customize slides and put whatever contents you can.
Copied !
---
import type { CarouselExampleProps } from "$views/examples/carousel/props";
import Carousel from "$components/carousel/Carousel.astro";
type Props = CarouselExampleProps;
const { slides } = Astro.props;
---
<Carousel {slides} />
With Indicators
By setting indicator props to true, dot points will appeared at the bottom of the carousel. It displays the number of items the carousel contains. These are indicator props value: true, top, bottom (default value when true), left, right.
Copied !
---
import type { CarouselExampleProps } from "$views/examples/carousel/props";
import Carousel from "$components/carousel/Carousel.astro";
type Props = CarouselExampleProps;
const { slides } = Astro.props;
---
<div class="flex flex-col gap-y-6">
<Carousel {slides} indicator />
<Carousel {slides} indicator="top" />
</div>
Carousel Direction
With direction props, you will be able to slide items from carousel horizontally (by default) or vertically ! Below an example of the design.
Copied !
---
import type { CarouselExampleProps } from "$views/examples/carousel/props";
import Carousel from "$components/carousel/Carousel.astro";
type Props = CarouselExampleProps;
const { slides } = Astro.props;
---
<div class="flex flex-col gap-y-4">
<Carousel {slides} indicator="right" direction="vertical" />
</div>