Skip to content

Commit

Permalink
Merge pull request #937 from searchspring/update-swiper-docs
Browse files Browse the repository at this point in the history
Update carousel readme to use correct swiper version doc links
  • Loading branch information
korgon authored Nov 1, 2023
2 parents 8e753c7 + a502c09 commit b66f2dd
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 12 deletions.
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
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

0 comments on commit b66f2dd

Please sign in to comment.