mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00

Files

Alessandro c6a6a77bbd feat: add carousel component

feat: add nav indicators

wip

wip

wip

fix: minor fixes

fix: minor fixes

fix: some refactor

chore: update docs

chore: update docs

fix: remove slide component

feat: create sl-carousel-item

feat: code refactoring and improvements

chore: update docs with more examples

chore: fix docs

feat: add autoplay

feat: implement accessibility

fix: change icons for rtl

chore: minor change

feat: improve accessibility

fix: minor regression

fix: minor regression

chore: fix docs

fix: improve accessibility and minor fixes

fix: remove heading and refactor component

chore: add custom style exmaple

fix: address review commnets

* Removed header from carousel
* Added `ArrowUp` and `ArrowDown` in keyboard navigation
* Added `--scroll-hint-margin` css property
* Added an example with customized carousel layout
* Fixed thumbnails navigation in demo
* Renamed show-controls to show-arrows and updated the corresponding parts/css accordingly
* Changed `activeSlideElement` getter to a private method
* Changed pagination colors
* Added `--slide-width` and `--slide-height` css properties

chore: update docs

fix: integrate latest repo changes

fix: add aspect ratio and rebase

chore: remove ignore path

feat: multiple slides per page

feat: multiple slide per page

fix: various improvements

chore: minor changes

chore: minor changes

chore: add bit of documentation

chore: improve documentation

fix: add unit tests and fix minor issues

chore: update documentation and unit tests

chore: update tests

2023-01-08 12:24:24 +01:00

754 B

Raw Blame History

Carousel Item

[component-header:sl-carousel-item]

<sl-carousel-item>
  <img
    alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
    src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
  />
</sl-carousel-item>

import { SlCarouselItem } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlCarouselItem>
    <img
      alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
      src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
    />
  </SlCarouselItem>
);

?> Additional demonstrations can be found in the carousel examples.

[component-metadata:sl-carousel-item]

754 B Raw Blame History

Carousel Item

754 B

Raw Blame History