Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update carousel readme to use correct swiper version doc links #937

Merged
merged 2 commits into from
Nov 1, 2023
Merged

Update carousel readme to use correct swiper version doc links #937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
231e554
docs(preact-components-carousel): update carousel readme to use corre…
chrisFrazier77 Oct 31, 2023
a502c09
docs(preact-components-carousel): more swiper doc tweaks
chrisFrazier77 Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions packages/snap-preact-components/src/components/Molecules/Carousel/readme.md
View file
Open in desktop
chrisFrazier77 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# Carousel

Renders a carousel of slides using children, built with [Swiper](https://swiperjs.com/)
Renders a carousel of slides using children, built with [Swiper v6.8.4](https://swiper6.vercel.app)

## Sub-components
- Icon

## Usage

Additional [Swiper Component Props](https://swiperjs.com/react#swiper-props) can be specified, but may need to be camelCased where appropriate.
Additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) can be provided via the `modules` prop; these may need additional props and or stylesheets.
Additional [Swiper Component Props](https://swiper6.vercel.app/swiper-api#parameters) can be specified, but may need to be camelCased where appropriate.
Additional [Swiper Modules](https://swiper6.vercel.app/swiper-api#modules) can be provided via the `modules` prop; these may need additional props and or stylesheets.

```jsx
<Carousel>{children}</Carousel>
Expand All @@ -21,7 +21,7 @@ The `loop` prop enables 'infinite' looping through the result set when swiping o
```

### pagination
The `pagination` prop can take a bool to enable pagination dots, or an object containing a SwiperOptions.pagination config object. Types can be found in [swiper docs](https://swiperjs.com/swiper-api#param-pagination-dynamicBullets).
The `pagination` prop can take a bool to enable pagination dots, or an object containing a SwiperOptions.pagination config object. Types can be found in [swiper docs](https://swiper6.vercel.app/swiper-api#pagination).

```jsx
<Carousel pagination={true}>{children}</Carousel>
Expand Down Expand Up @@ -97,11 +97,11 @@ The `onInit` prop can be used to tie into the initialization event for swiper.
```

### modules
The `modules` prop accepts additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) - these may need additional props and or stylesheets to function. We include `Navigation` and `Pagination` modules by default.
The `modules` prop accepts additional [Swiper Modules](https://swiper6.vercel.app/swiper-api#modules) - these may need additional props and or stylesheets to function. We include `Navigation` and `Pagination` modules by default.

```jsx
import { Scrollbar } from 'swiper';
<Carousel modules={[Scrollbar]} scrollbar>{children}</Carousel>
<Carousel modules={[Scrollbar]} scrollbar={{ draggable: true }}>{children}</Carousel>
```

### autoAdjustSlides
Expand All @@ -112,7 +112,7 @@ An object that modifies the responsive behavior of the carousel at various viewp

The object key specified the viewport for when the parameters will be applied.

The default configuration contains the following properties, however **`any Carousel props`** or [Swiper API parameters](https://swiperjs.com/swiper-api#parameters) can also be specified.
The default configuration contains the following properties, however **`any Carousel props`** or [Swiper API parameters](https://swiper6.vercel.app/swiper-api#parameters) can also be specified.

`slidesPerView` - number of products to display per page

Expand Down
10 changes: 5 additions & 5 deletions packages/snap-preact-components/src/components/Organisms/Recommendation/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ Any modification to the results array and data are recommended to be made using

## Usage

Additional [Swiper Component Props](https://swiperjs.com/react#swiper-props) can be specified, but may need to be camelCased where appropriate.
Additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) can be provided via the `modules` prop; these may need additional props and or stylesheets.
Additional [Swiper Component Props](https://swiper6.vercel.app/swiper-api#parameters) can be specified, but may need to be camelCased where appropriate.
Additional [Swiper Modules](https://swiper6.vercel.app/swiper-api#modules) can be provided via the `modules` prop; these may need additional props and or stylesheets.

### controller
The required `controller` prop specifies a reference to the RecommendationController
Expand Down Expand Up @@ -81,19 +81,19 @@ The `nextButton` prop specifies the next button element of the carousel. This ca
```

### modules
The `modules` prop accepts additional [Swiper Modules](https://swiperjs.com/swiper-api#modules) - these may need additional props and or stylesheets to function. We include `Navigation` and `Pagination` modules by default.
The `modules` prop accepts additional [Swiper Modules](https://swiper6.vercel.app/swiper-api#modules) - these may need additional props and or stylesheets to function. We include `Navigation` and `Pagination` modules by default.

```jsx
import { Scrollbar } from 'swiper';
<Recommendation controller={controller} modules={[Scrollbar]} scrollbar />
<Recommendation controller={controller} modules={[Scrollbar]} scrollbar={{ draggable: true }} />
```

### breakpoints
An object that modifies the responsive behavior of the carousel at various viewports.

The object key specified the viewport for when the parameters will be applied.

The default configuration contains the following properties, however **`any Recommendation props`**, or [Swiper API parameters](https://swiperjs.com/swiper-api#parameters) can also be specified.
The default configuration contains the following properties, however **`any Recommendation props`**, or [Swiper API parameters](https://swiper6.vercel.app/swiper-api#parameters) can also be specified.

`slidesPerView` - number of products to display per page

Expand Down
Loading