kopia lustrzana https://github.com/shoelace-style/shoelace
update and fix typos
Cory LaViska
rodzic
74203de094
commit
603aa93322
|
|
@ -27,6 +27,7 @@
|
|||
"Consolas",
|
||||
"contenteditable",
|
||||
"copydir",
|
||||
"Cotte",
|
||||
"coverpage",
|
||||
"crossorigin",
|
||||
"crutchcorn",
|
||||
|
|
@ -71,10 +72,12 @@
|
|||
"jsonata",
|
||||
"keydown",
|
||||
"keyframes",
|
||||
"Kool",
|
||||
"labelledby",
|
||||
"Laravel",
|
||||
"LaViska",
|
||||
"listbox",
|
||||
"listitem",
|
||||
"litelement",
|
||||
"lowercasing",
|
||||
"Lucide",
|
||||
|
|
@ -107,9 +110,13 @@
|
|||
"rgba",
|
||||
"roadmap",
|
||||
"Roboto",
|
||||
"roledescription",
|
||||
"Sapan",
|
||||
"saturationl",
|
||||
"Schilp",
|
||||
"scrollbars",
|
||||
"scrollend",
|
||||
"scroller",
|
||||
"Segoe",
|
||||
"semibold",
|
||||
"slotchange",
|
||||
|
|
|
|||
|
Przed Szerokość: | Wysokość: | Rozmiar: 91 KiB Po Szerokość: | Wysokość: | Rozmiar: 91 KiB |
|
Przed Szerokość: | Wysokość: | Rozmiar: 69 KiB Po Szerokość: | Wysokość: | Rozmiar: 69 KiB |
|
Przed Szerokość: | Wysokość: | Rozmiar: 100 KiB Po Szerokość: | Wysokość: | Rozmiar: 100 KiB |
|
Przed Szerokość: | Wysokość: | Rozmiar: 53 KiB Po Szerokość: | Wysokość: | Rozmiar: 53 KiB |
|
Przed Szerokość: | Wysokość: | Rozmiar: 175 KiB Po Szerokość: | Wysokość: | Rozmiar: 175 KiB |
|
|
@ -9,31 +9,31 @@ Carousels consist of optional navigation arrows to go backwards and forwards, as
|
|||
<sl-carousel-item>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
</sl-carousel>
|
||||
|
|
@ -149,31 +149,31 @@ const App = () => {
|
|||
<SlCarouselItem>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
</SlCarousel>
|
||||
|
|
@ -411,31 +411,31 @@ it's important to specify a predefined height to the carousel through CSS.
|
|||
<sl-carousel-item>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
</sl-carousel>
|
||||
|
|
@ -487,31 +487,31 @@ const App = () => (
|
|||
<SlCarouselItem>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
</SlCarousel>
|
||||
|
|
@ -529,31 +529,31 @@ Use the `--aspect-ratio` custom property to customize the size of viewport in or
|
|||
<sl-carousel-item>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
</sl-carousel>
|
||||
|
|
@ -590,31 +590,31 @@ const App = () => {
|
|||
<SlCarouselItem>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
</SlCarousel>
|
||||
|
|
@ -649,31 +649,31 @@ be scrolled.
|
|||
<sl-carousel-item>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
</sl-carousel>
|
||||
|
|
@ -711,31 +711,31 @@ const App = () => {
|
|||
<SlCarouselItem>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
</SlCarousel>
|
||||
|
|
@ -757,38 +757,38 @@ const App = () => {
|
|||
|
||||
### Custom layout
|
||||
|
||||
The appereance of the carousel can be easly customized through its slots or `part` attributes.
|
||||
The appearance of the carousel can be easily customized through its slots or `part` attributes.
|
||||
|
||||
```html preview
|
||||
<sl-carousel class="custom-layout" navigation pagination>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
|
||||
|
|
@ -894,31 +894,31 @@ const App = () => (
|
|||
<SlCarouselItem>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
|
||||
|
|
@ -937,68 +937,48 @@ use `next()` or `previous()` to go respectively to the next or the previous slid
|
|||
|
||||
When the active slide is changed, the `sl-slide-change` event is emitted providing the `index` of the slide.
|
||||
|
||||
Using the API is possible to extend the carousel, for exmaple by syncing the active slide with a set of thumbnails, like in the example below.
|
||||
Using the API is possible to extend the carousel, for example by syncing the active slide with a set of thumbnails, like in the example below.
|
||||
|
||||
```html preview
|
||||
<sl-carousel class="carousel-thumbnails" navigation loop>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</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"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
</sl-carousel>
|
||||
<div class="thumbnails">
|
||||
<div class="thumbnails__scroller">
|
||||
<img
|
||||
alt="Thumbnail Photo by 1"
|
||||
class="thumbnails__image active"
|
||||
src="/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg"
|
||||
/>
|
||||
<img
|
||||
alt="Thumbnail Photo by 2"
|
||||
class="thumbnails__image"
|
||||
src="/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg"
|
||||
/>
|
||||
<img
|
||||
alt="Thumbnail Photo by 3"
|
||||
class="thumbnails__image"
|
||||
src="/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg"
|
||||
/>
|
||||
<img
|
||||
alt="Thumbnail Photo by 4"
|
||||
class="thumbnails__image"
|
||||
src="/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg"
|
||||
/>
|
||||
<img
|
||||
alt="Thumbnail Photo by 5"
|
||||
class="thumbnails__image"
|
||||
src="/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg"
|
||||
/>
|
||||
<img alt="Thumbnail Photo by 1" class="thumbnails__image active" src="/assets/examples/carousel/mountains.jpg" />
|
||||
<img alt="Thumbnail Photo by 2" class="thumbnails__image" src="/assets/examples/carousel/waterfall.jpg" />
|
||||
<img alt="Thumbnail Photo by 3" class="thumbnails__image" src="/assets/examples/carousel/sunset.jpg" />
|
||||
<img alt="Thumbnail Photo by 4" class="thumbnails__image" src="/assets/examples/carousel/field.jpg" />
|
||||
<img alt="Thumbnail Photo by 5" class="thumbnails__image" src="/assets/examples/carousel/valley.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
|
|
@ -1117,23 +1097,23 @@ const css = `
|
|||
|
||||
const images = [
|
||||
{
|
||||
src: '/assets/examples/carousel/adam-kool-ndN00KmbJ1c-unsplash.jpg',
|
||||
src: '/assets/examples/carousel/mountains.jpg',
|
||||
alt: 'The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash'
|
||||
},
|
||||
{
|
||||
src: '/assets/examples/carousel/thomas-kelley-JoH60FhTp50-unsplash.jpg',
|
||||
src: '/assets/examples/carousel/waterfall.jpg',
|
||||
alt: 'A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash'
|
||||
},
|
||||
{
|
||||
src: '/assets/examples/carousel/leonard-cotte-c1Jp-fo53U8-unsplash.jpg',
|
||||
src: '/assets/examples/carousel/sunset.jpg',
|
||||
alt: 'The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash'
|
||||
},
|
||||
{
|
||||
src: '/assets/examples/carousel/sapan-patel-i9Q9bc-WgfE-unsplash.jpg',
|
||||
src: '/assets/examples/carousel/field.jpg',
|
||||
alt: 'A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash'
|
||||
},
|
||||
{
|
||||
src: '/assets/examples/carousel/v2osk-1Z2niiBPg5A-unsplash.jpg',
|
||||
src: '/assets/examples/carousel/valley.jpg',
|
||||
alt: 'A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash'
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import { map } from 'lit/directives/map.js';
|
|||
import { prefersReducedMotion } from '../../internal/animate';
|
||||
import { range } from 'lit/directives/range.js';
|
||||
import { ScrollController } from './scroll-controller';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import { watch } from '../../internal/watch';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
import ShoelaceElement from '../../internal/shoelace-element';
|
||||
|
|
@ -18,7 +17,7 @@ import styles from './carousel.styles';
|
|||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @summary A generic carousel used for displaying an arbitrary number of `sl-carousel-item` along horizontal or vertical axis.
|
||||
* @summary Carousels display an arbitrary number of slides along a horizontal or vertical axis.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status experimental
|
||||
|
|
@ -43,7 +42,8 @@ import type { CSSResultGroup } from 'lit';
|
|||
*
|
||||
* @cssproperty --slide-gap - The space between each slide.
|
||||
* @cssproperty --aspect-ratio - The aspect ratio of each slide.
|
||||
* @cssproperty --scroll-padding - The amount of padding to apply to the scrollport, useful to make visible the closest slides.
|
||||
* @cssproperty --scroll-padding - The amount of padding to apply to the scroll area. Useful to make adjacent slides
|
||||
* visible.
|
||||
*
|
||||
*/
|
||||
@customElement('sl-carousel')
|
||||
|
|
@ -68,7 +68,10 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
/** Specifies how many slides should be shown at a given time. */
|
||||
@property({ type: Number, attribute: 'slides-per-page' }) slidesPerPage = 1;
|
||||
|
||||
/** Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page` greather than one. */
|
||||
/**
|
||||
* Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`
|
||||
* greater than one.
|
||||
*/
|
||||
@property({ type: Number, attribute: 'slides-per-move' }) slidesPerMove = 1;
|
||||
|
||||
/** Specifies the orientation in which the carousel will lay out. */
|
||||
|
|
@ -91,10 +94,10 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
|
||||
private readonly slides = this.getElementsByTagName('sl-carousel-item');
|
||||
|
||||
// The interseection observer is used to determine which slide is displayed
|
||||
// The intersection observer is used to determine which slide is displayed
|
||||
private intersectionObserver: IntersectionObserver;
|
||||
|
||||
// A map containig the state of all the slides
|
||||
// A map containing the state of all the slides
|
||||
private readonly intersectionObserverEntries = new Map<Element, IntersectionObserverEntry>();
|
||||
|
||||
private readonly localize = new LocalizeController(this);
|
||||
|
|
@ -138,7 +141,7 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
}
|
||||
|
||||
protected firstUpdated(): void {
|
||||
this.initialiseSlides();
|
||||
this.initializeSlides();
|
||||
this.mutationObserver = new MutationObserver(this.handleSlotChange.bind(this));
|
||||
this.mutationObserver.observe(this, { childList: true, subtree: false });
|
||||
}
|
||||
|
|
@ -186,15 +189,15 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
}
|
||||
|
||||
handleSlotChange(mutations: MutationRecord[]) {
|
||||
const needsInitialisation = mutations.some(mutation =>
|
||||
const needsInitialization = mutations.some(mutation =>
|
||||
[...mutation.addedNodes, ...mutation.removedNodes].some(
|
||||
node => SlCarouselItem.isCarouselItem(node) && !(node as HTMLElement).hasAttribute('data-clone')
|
||||
)
|
||||
);
|
||||
|
||||
// Reinitialise the carousel if a carousel item has been added and/or removed
|
||||
if (needsInitialisation) {
|
||||
this.initialiseSlides();
|
||||
// Reinitialize the carousel if a carousel item has been added and/or removed
|
||||
if (needsInitialization) {
|
||||
this.initializeSlides();
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
|
|
@ -213,7 +216,7 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
return;
|
||||
}
|
||||
|
||||
// Activate the first inetersecting slide
|
||||
// Activate the first intersecting slide
|
||||
if (firstIntersecting) {
|
||||
this.activeSlide = slides.indexOf(firstIntersecting.target as SlCarouselItem);
|
||||
}
|
||||
|
|
@ -221,7 +224,7 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
|
||||
@watch('loop', { waitUntilFirstUpdate: true })
|
||||
@watch('slidesPerPage', { waitUntilFirstUpdate: true })
|
||||
initialiseSlides() {
|
||||
initializeSlides() {
|
||||
const slides = this.getSlides();
|
||||
const intersectionObserver = this.intersectionObserver;
|
||||
|
||||
|
|
@ -412,9 +415,7 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
@scrollend="${this.handleScrollEnd}"
|
||||
role="list"
|
||||
tabindex="0"
|
||||
style="${styleMap({
|
||||
'--slides-per-page': String(this.slidesPerPage)
|
||||
})}"
|
||||
style="--slides-per-page: ${this.slidesPerPage};"
|
||||
aria-live="${!autoplayController.stopped && !autoplayController.paused ? 'off' : 'polite'}"
|
||||
aria-busy="${scrollController.scrolling ? 'true' : 'false'}"
|
||||
aria-atomic="true"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { prefersReducedMotion } from 'src/internal/animate';
|
||||
import { debounce } from 'src/internal/debounce';
|
||||
import { prefersReducedMotion } from 'src/internal/animate';
|
||||
import { waitForEvent } from 'src/internal/event';
|
||||
import type { ReactiveController, ReactiveElement } from 'lit';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,34 @@
|
|||
export { default as SlAfterCollapseEvent } from './sl-after-collapse';
|
||||
export { default as SlAfterExpandEvent } from './sl-after-expand';
|
||||
export { default as SlAfterHideEvent } from './sl-after-hide';
|
||||
export { default as SlAfterShowEvent } from './sl-after-show';
|
||||
export { default as SlBlurEvent } from './sl-blur';
|
||||
export { default as SlCancelEvent } from './sl-cancel';
|
||||
export { default as SlChangeEvent } from './sl-change';
|
||||
export { default as SlClearEvent } from './sl-clear';
|
||||
export { default as SlCloseEvent } from './sl-close';
|
||||
export { default as SlCollapseEvent } from './sl-collapse';
|
||||
export { default as SlErrorEvent } from './sl-error';
|
||||
export { default as SlExpandEvent } from './sl-expand';
|
||||
export { default as SlFinishEvent } from './sl-finish';
|
||||
export { default as SlFocusEvent } from './sl-focus';
|
||||
export { default as SlHideEvent } from './sl-hide';
|
||||
export { default as SlHoverEvent } from './sl-hover';
|
||||
export { default as SlInitialFocusEvent } from './sl-initial-focus';
|
||||
export { default as SlInputEvent } from './sl-input';
|
||||
export { default as SlInvalidEvent } from './sl-invalid';
|
||||
export { default as SlLazyChangeEvent } from './sl-lazy-change';
|
||||
export { default as SlLazyLoadEvent } from './sl-lazy-load';
|
||||
export { default as SlLoadEvent } from './sl-load';
|
||||
export { default as SlMutationEvent } from './sl-mutation';
|
||||
export { default as SlRemoveEvent } from './sl-remove';
|
||||
export { default as SlRepositionEvent } from './sl-reposition';
|
||||
export { default as SlRequestCloseEvent } from './sl-request-close';
|
||||
export { default as SlResizeEvent } from './sl-resize';
|
||||
export { default as SlSelectEvent } from './sl-select';
|
||||
export { default as SlSelectionChangeEvent } from './sl-selection-change';
|
||||
export { default as SlShowEvent } from './sl-show';
|
||||
export { default as SlSlideChange } from './sl-slide-change';
|
||||
export { default as SlStartEvent } from './sl-start';
|
||||
export { default as SlTabHideEvent } from './sl-tab-hide';
|
||||
export { default as SlTabShowEvent } from './sl-tab-show';
|
||||
export { default as SlErrorEvent } from './sl-error';
|
||||
export { default as SlRequestCloseEvent } from './sl-request-close';
|
||||
export { default as SlShowEvent } from './sl-show';
|
||||
export { default as SlAfterShowEvent } from './sl-after-show';
|
||||
export { default as SlHideEvent } from './sl-hide';
|
||||
export { default as SlAfterHideEvent } from './sl-after-hide';
|
||||
export { default as SlBlurEvent } from './sl-blur';
|
||||
export { default as SlFocusEvent } from './sl-focus';
|
||||
export { default as SlChangeEvent } from './sl-change';
|
||||
export { default as SlInputEvent } from './sl-input';
|
||||
export { default as SlInitialFocusEvent } from './sl-initial-focus';
|
||||
export { default as SlLoadEvent } from './sl-load';
|
||||
export { default as SlClearEvent } from './sl-clear';
|
||||
export { default as SlRepositionEvent } from './sl-reposition';
|
||||
export { default as SlCloseEvent } from './sl-close';
|
||||
export { default as SlRemoveEvent } from './sl-remove';
|
||||
export { default as SlExpandEvent } from './sl-expand';
|
||||
export { default as SlAfterExpandEvent } from './sl-after-expand';
|
||||
export { default as SlCollapseEvent } from './sl-collapse';
|
||||
export { default as SlAfterCollapseEvent } from './sl-after-collapse';
|
||||
export { default as SlLazyChangeEvent } from './sl-lazy-change';
|
||||
export { default as SlLazyLoadEvent } from './sl-lazy-load';
|
||||
export { default as SlCancelEvent } from './sl-cancel';
|
||||
export { default as SlFinishEvent } from './sl-finish';
|
||||
export { default as SlStartEvent } from './sl-start';
|
||||
export { default as SlInvalidEvent } from './sl-invalid';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import type SlCarouselItem from '../components/carousel-item/carousel-item';
|
||||
|
||||
type SlSlideChange = CustomEvent<{ index: number; slide: SlCarouselItem }>;
|
||||
|
||||
declare global {
|
||||
interface GlobalEventHandlersEventMap {
|
||||
'sl-slide-change': SlSlideChange;
|
||||
}
|
||||
}
|
||||
|
||||
export default SlSlideChange;
|
||||
|
|
@ -13,16 +13,16 @@
|
|||
//
|
||||
|
||||
// Each class instance will need to store its timer id, so this unique symbol will be used as property key.
|
||||
const TIMERID_KEY = Symbol();
|
||||
const TIMER_ID_KEY = Symbol();
|
||||
|
||||
export const debounce = (delay: number) => {
|
||||
return <T>(_target: T, _propertyKey: string, descriptor: PropertyDescriptor) => {
|
||||
const fn = descriptor.value as (this: T & { [TIMERID_KEY]: number }, ...args: unknown[]) => unknown;
|
||||
const fn = descriptor.value as (this: T & { [TIMER_ID_KEY]: number }, ...args: unknown[]) => unknown;
|
||||
|
||||
descriptor.value = function (this: ThisParameterType<typeof fn>, ...args: Parameters<typeof fn>) {
|
||||
clearTimeout(this[TIMERID_KEY]);
|
||||
clearTimeout(this[TIMER_ID_KEY]);
|
||||
|
||||
this[TIMERID_KEY] = window.setTimeout(() => {
|
||||
this[TIMER_ID_KEY] = window.setTimeout(() => {
|
||||
fn.apply(this, args);
|
||||
}, delay);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,7 +29,9 @@ export interface Translation extends DefaultTranslation {
|
|||
showPassword: string;
|
||||
toggleColorFormat: string;
|
||||
|
||||
// TODO: upate translations for all languages
|
||||
//
|
||||
// TODO: update translations for all languages
|
||||
//
|
||||
goToCarouselNextSlide?: string;
|
||||
goToCarouselPreviousSlide?: string;
|
||||
goToCarouselSlide?: (slide: number, count: number) => string;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue