https://github.com/claudiabdm/astro-carousel

Accessible carousel component for Astro🎠
https://github.com/claudiabdm/astro-carousel

a11y accessibility astro astro-build astro-component astrojs carousel component

Last synced: 3 months ago
JSON representation

Accessible carousel component for Astro🎠

• Host: GitHub
• URL: https://github.com/claudiabdm/astro-carousel
• Owner: claudiabdm
• License: mit
• Created: 2023-08-15T06:40:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-02T19:20:17.000Z (4 months ago)
• Last Synced: 2024-10-29T23:43:14.420Z (3 months ago)
• Topics: a11y, accessibility, astro, astro-build, astro-component, astrojs, carousel, component
• Language: Astro
• Homepage: https://www.npmjs.com/package/astro-carousel
• Size: 31.1 MB
• Stars: 25
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

![Screenshot of astro-carousel open in a website](https://a.storyblok.com/f/95455/2560x1600/8bdc66d7ea/screenshot-2024-04-26-at-13-42-02.png/m/1280x0)

# Installation

```bash

npm install astro-carousel

```

# Usage

Import astro-carousel to your Astro component

````js

---

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}`}```.

 

```js



  {

    images.map((img, index) => {

      return (

        


          

            

          

        

      );

    })

  }



```


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`. 

```js

---

import Carousel from 'astro-carousel';

const images: ComponentProps["images"] = [

  {

    src: "https://a.storyblok.com/f/95455/1350x1080/3ef7748922/p5240368.jpg",

    alt: "",

    format: "webp",

    width: 1350,

    height: 1080,

    widths: [450, 675, 1350],

  }

];

---

```

The color of the buttons can be customized by passing the desired color in a CSS color valid format to the prop `color`.

```js

```