# salla-products-slider (https://docs.salla.dev/twilight/react/web-components/salla-products-slider) {/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */} Fetches a set of products (by category, brand, tag, latest, offers, related, a fixed list of ids, or your own JSON) and shows them as product cards in a carousel (`salla-slider`). Use it for home-page product blocks and "related products" sections on a product page. It renders nothing until the products are loaded, and logs a warning and renders nothing when the source needs a `source-value` and none is given. Fires the global `salla-products-slider::products.fetched` event with the loaded products array after an API fetch. Products can be filtered or changed before rendering with the `beforeAppendItems` hook (`salla.hooks.registerHook('salla-products-slider', 'beforeAppendItems', ctx => { ctx.items = ... })`). ## Use it [#use-it] In HTML or JSX, use the tag `` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase). This component has a native React version. Use it instead of the raw tag: ```tsx import { SallaProductsSlider } from '@salla.sa/twilight-components-react'; ``` ## Example [#example] ```tsx import { SallaProductsSlider } from '@salla.sa/twilight-components-react'; export function Example() { return ( ); } ``` ```html ``` ## Properties [#properties] | Property | Attribute | Description | Type | Default | | ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | | `autoplay` | `autoplay` | When true, the slider advances automatically (passed to the inner `salla-slider` as `auto-play`). | `boolean` | | | `blockTitle` | `block-title` | Heading shown above the slider (passed to the inner `salla-slider` as its block title). | `string` | | | `displayAllUrl` | `display-all-url` | URL of the "display all" link shown by the inner `salla-slider`, usually a listing page for the same products. | `string` | | | `includes` | `includes` | Extra data to include in each fetched product. The value can be an array of strings or a JSON string; anything that does not parse to an array is ignored. Example: - As an array: includes=\["options"] - As a JSON string: includes='\["options"]' The array or JSON string can include: - "options": Include product options in the response. - "images": Include product images in the response. | `string[]` | | | `limit` | `limit` | Maximum number of products to fetch (a count). Sent to the products API; it is not applied when `source` is `json`. | `number` | | | `productCardComponent` | `product-card-component` | Tag name of the custom element used to render each product card, defaulting to `custom-salla-product-card`. If no element with that tag is registered, the built-in `salla-product-card` is used. A custom element receives the product as its `product` attribute (JSON), plus `source` and `source-value`. | `string` | `'custom-salla-product-card'` | | `sliderConfig` | `slider-config` | Swiper options object for the inner slider (see [https://swiperjs.com/swiper-api#parameters](https://swiperjs.com/swiper-api#parameters)). Set it as a JS property with the entire config object. | `any` | | | `sliderId` | `slider-id` | The `id` given to the inner `salla-slider`. If not provided, a random `s-products-slider-xxxx` id is generated on each render. | `string` | | | `sliderProps` | `slider-props` | Additional props to pass through to the inner salla-slider component. Use this to set any salla-slider props (e.g. loop, pagination, showControls, enableSingleSlideMode). | `{ autoPlay?: boolean; loop?: boolean; type?: "" \| "default" \| "blog" \| "carousel" \| "fullscreen" \| "thumbs" \| "hero" \| "testimonials" \| "fullwidth"; direction?: string; autoHeight?: boolean; showControls?: boolean; sliderConfig?: any; vertical?: boolean; blockTitle?: string; listenToThumbnailsOption?: boolean; blockSubtitle?: string; displayAllUrl?: string; arrowsCentered?: boolean; verticalThumbs?: boolean; gridThumbs?: boolean; controlsOuter?: boolean; showThumbsControls?: boolean; staticWhenSingle?: boolean; slidesPerView?: string; pagination?: boolean; centered?: boolean; thumbsConfig?: any; }` | | | `source` | `source` | Where the products come from. `json` uses the products you pass in `source-value` without calling the API; every other value fetches products from the API (`recently` is fetched as `selected`). `latest`, `offers` and `top-rated` need no `source-value`; `sales` also needs none but is not in the type union. If omitted, the source is derived from the current page type, and falls back to `latest`. | `"brands" \| "categories" \| "json" \| "landing-page" \| "latest" \| "offers" \| "recently" \| "related" \| "selected" \| "tags" \| "top-rated" \| "wishlist"` | | | `sourceValue` | `source-value` | The value that goes with `source`. A JSON string (or a plain value) in one of these shapes: - an array of ids, for example `"[12, 34]"`, when `source` is `categories`, `brands`, `tags` or `selected` (for `categories`, `brands` and `tags` the current page id is used when it is empty) - an array of product objects when `source` is `json` - the product id when `source` is `related` | `string` | | | `subTitle` | `sub-title` | Sub heading shown under the block title (passed to the inner `salla-slider`). | `string` | | ### `productCardComponent` example [#productcardcomponent-example] ```html `](https://docs.salla.dev/twilight/react/web-components/salla-product-card), [``](https://docs.salla.dev/twilight/react/web-components/salla-slider). Used inside: [``](https://docs.salla.dev/twilight/react/web-components/salla-offer-modal), [``](https://docs.salla.dev/twilight/react/web-components/salla-reward-details).