Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
melvin-chen committed Jan 14, 2025
1 parent 4b15005 commit 41fbb2d
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 31 deletions.
26 changes: 0 additions & 26 deletions docs/api/autoplay.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -31,29 +31,3 @@ For accessibility, the carousel will pause when the user is interacting with it.
<img src="pexels-03.jpg" />
</Carousel>
```

## Initial page

The carousel can start on any index within bounds of its length. Anything out of bounds will default back to `0` for its index. This list is `0` indexed.

| Prop Name | Type | Default Value |
| :------------ | :----- | :------------ |
| `initialPage` | number | `0` |

### Example

<Carousel initialPage={1}>
<img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
<img src="/open-source/nuka-carousel/img/pexels-02.jpg" />
<img src="/open-source/nuka-carousel/img/pexels-03.jpg" />
</Carousel>

#### Code

```tsx
<Carousel initialPage={1}>
<img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
<img src="/open-source/nuka-carousel/img/pexels-02.jpg" />
<img src="/open-source/nuka-carousel/img/pexels-03.jpg" />
</Carousel>
```
14 changes: 10 additions & 4 deletions docs/api/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,12 @@ Feel free to mix React components and HTML elements as children. Nuka Carousel w

:::caution

Nuka Carousel uses a flex container for its magic

:::
### Nuka Carousel uses a flex container to hold its contents.

In order for Nuka to measure your slides, they must have a width that can be calculated.

:::

### Images

If you're using images, Nuka will correctly calculate the width and height of the image after it has loaded.
Expand Down Expand Up @@ -114,6 +114,12 @@ However, it's recommended to set the width and height of the image in the HTML t

When using HTML block elements, such as `div`, you must set the min width in the HTML.

:::info

Most of the examples use <a href="https://tailwindcss.com/" target="_blank">Tailwind</a> classes for styling

:::

```jsx
.demo-slide {
min-width: 300px;
Expand Down Expand Up @@ -145,5 +151,5 @@ function CarouselImage() {
<CarouselImage />
<CarouselImage />
<CarouselImage />
</Carousel>
</Carousel>;
```
31 changes: 31 additions & 0 deletions docs/api/initial-page.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
sidebar_position: 4
---

import { Carousel } from 'nuka-carousel';

# Initial Page

The carousel can start on any index within bounds of its length. Anything out of bounds will default back to `0` for its index. This list is `0` indexed.

| Prop Name | Type | Default Value |
| :------------ | :----- | :------------ |
| `initialPage` | number | `0` |

### Example

<Carousel initialPage={1}>
<img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
<img src="/open-source/nuka-carousel/img/pexels-02.jpg" />
<img src="/open-source/nuka-carousel/img/pexels-03.jpg" />
</Carousel>

#### Code

```tsx
<Carousel initialPage={1}>
<img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
<img src="/open-source/nuka-carousel/img/pexels-02.jpg" />
<img src="/open-source/nuka-carousel/img/pexels-03.jpg" />
</Carousel>
```
2 changes: 1 addition & 1 deletion docs/v8-upgrade-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ The following props were removed becuase they are no longer valid or replaced by
- `pauseOnHover` - Enabled by default. See the <Link to="/docs/api/autoplay">autoplay</Link> docs.
- `renderTop{direction}Controls`
- `scrollMode` - Defaults to `remainder`.
- `slideIndex` - Use <Link to="/docs/api/autoplay#initial-page">initialPage</Link> to start on a certain page, use <Link to="/docs/api/methods#progression">goToPage</Link> to change indices on command.
- `slideIndex` - Use <Link to="/docs/api/initial-page">initialPage</Link> to start on a certain page, use <Link to="/docs/api/methods#progression">goToPage</Link> to change indices on command.
- `slidesToShow` - Now based on media queries and how large the slides are.
- `speed` - Controlled by native browser settings.
- `style` - See the <Link to="/docs/api">style guide</Link>.
Expand Down

0 comments on commit 41fbb2d

Please sign in to comment.