astro-carousel
v2.1.0
Published
An accessible carousel component for Astro π that works by using browser navigation.
Downloads
666
Maintainers
Readme
astro-carousel π
An accessible carousel component for Astro π that works by using browser navigation.
Demo: https://astro-carousel.pages.dev
Live example: https://kuraunaito.com/photos/saint-malo/?image=0
Installation
npm install astro-carousel
Usage
Import astro-carousel to your Astro component
---
import Carousel from 'astro-carousel';
---
...
To open the carousel from a list of images, you need to use id="carouselTargetList"
in the parent element and data-carousel-index={index}
in the anchor tag of children elements. You also need to set the href
of the anchor tag to href={`${path}?image=${index}`}
.
<ul id="carouselTargetList">
{
images.map((img, index) => {
return (
<li>
<a
href={`/?image=${index}`}
data-carousel-index={index}
>
<img src={img} alt="" />
</a>
</li>
);
})
}
</ul>
After importing the Carousel component in your Astro component, you just need to create a list of images and pass it to the prop images
.
---
import Carousel from 'astro-carousel';
const images: ComponentProps<typeof Carousel>["images"] = [
{
src: "https://a.storyblok.com/f/95455/1350x1080/3ef7748922/p5240368.jpg",
alt: "",
format: "webp",
width: 1350,
height: 1080,
widths: [450, 675, 1350],
}
];
---
<Carousel images={images} />
The color of the buttons can be customized by passing the desired color in a CSS color valid format to the prop color
.
<Carousel images={images} color="hsl(239, 90%, 65%)" />