#48 : Apply anchor settings

src/docs/Carousel.svx

@@ -9,9 +9,9 @@
   import colors from './data/colors.json'
 </script>
 
-# Features
+# Features!anchorId:features;
 
-## Single item
+## Single item!anchorId:features-single-item;
 <Carousel>
   {#each colors as { color, text } (color)}
     <Color {color} {text} />
@@ -28,7 +28,7 @@
 
 <Divider />
 
-## Multiple items
+## Multiple items!anchorId:features-multiple-items;
 <Carousel>
   {#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
     <div style="display: flex;">
@@ -53,7 +53,7 @@
 
 <Divider />
 
-## Autoplay
+## Autoplay!anchorId:features-autoplay;
 <Carousel
   autoplay
   autoplayDuration={2000}
@@ -76,7 +76,7 @@
 
 <Divider />
 
-## Autoplay with duration progress
+## Autoplay with duration progress!anchorId:features-autoplay-duration-progress;
 <Carousel
   autoplay
   autoplayDuration={5000}
@@ -101,7 +101,7 @@
 
 <Divider />
 
-## Autoplay with pause on focus
+## Autoplay with pause on focus!anchorId:features-autoplay-pause-on-focus;
 
 **For desktop** - hover over the carousel to toggle the autoplay.
 **For touchable devices** - tap the carousel to toggle the autoplay.
@@ -132,7 +132,7 @@
 
 <Divider />
 
-## Lazy loading of images
+## Lazy loading of images!anchorId:features-lazy-loading;
 <Carousel
   let:loaded
 >
@@ -161,7 +161,7 @@
 
 <Divider />
 
-## Arrows customization
+## Arrows customization!anchorId:features-arrows-customization;
 <Carousel
   let:showPrevPage
   let:showNextPage
@@ -196,7 +196,7 @@
 
 <Divider />
 
-## Dots customization
+## Dots customization!anchorId:features-dots-customization;
 <Carousel
   let:currentPageIndex
   let:pagesCount
@@ -239,12 +239,13 @@
 
 <Divider />
 
-## Use case
+## Use case!anchorId:features-use-cases;
 <AlbumsPreview />
 
 <Divider />
 
-# Installation
+# Installation!anchorId:installation;
+
 ```bash
 yarn add svelte-carousel
 ```
@@ -262,7 +263,7 @@ Import component
 
 <Divider />
 
-# Props
+# Props!anchorId:props;
 
 | Prop                      | Type       | Default         | Description                                   | 
 |---------------------------|------------|-----------------|-----------------------------------------------|
@@ -281,9 +282,9 @@ Import component
 
 <Divider />
 
-# Events
+# Events!anchorId:events;
 
-## `pageChange`
+## `pageChange`!anchorId:events-page-change;
 Is dispatched on page change
 
 | Payload field      | Type        | Description                           | 
@@ -302,9 +303,9 @@ Is dispatched on page change
 
 <Divider />
 
-# Slots
+# Slots!anchorId:slots;
 
-## `prev` and `next`
+## `prev` and `next`!anchorId:slots-prev-next;
 They are used for customizing prev and next buttons.
 
 Slot props:
@@ -329,7 +330,7 @@ Slot props:
 </Carousel>
 ```
 
-## `dots`
+## `dots`!anchorId:slots-dots;
 
 This slot is used for customizing dots appearance.
 
@@ -354,7 +355,7 @@ Slot props:
 </Carousel>
 ```
 
-## Default slot
+## Default slot!anchorId:slots-default;
 
 This slot takes content for the carousel.
 
@@ -377,9 +378,9 @@ Slot props:
 
 <Divider />
 
-# Methods
+# Methods!anchorId:methods;
 
-## `goTo`
+## `goTo`!anchorId:methods-go-to;
 Navigates to a page by index. `(pageIndex, options) => Promise<void>`.
 
 Arguments:
@@ -406,7 +407,7 @@ Arguments:
 <button class="button" on:click={goToStartPage}>Go</button>
 ```
 
-## `goToPrev`
+## `goToPrev`!anchorId:methods-go-to-prev;
 Navigates to the previous page. `(options) => Promise<void>`.
 
 Arguments:
@@ -432,7 +433,7 @@ Arguments:
 <button class="button" on:click={goToPrevPage}>Go</button>
 ```
 
-## `goToNext`
+## `goToNext`!anchorId:methods-go-to-next;
 Navigates to the next page. `(options) => Promise<void>`.
 
 Arguments:
@@ -521,4 +522,4 @@ Arguments:
     justify-content: center;
     padding: 0 20px;
   }
-</style>
+</style>