X Slider

Cho phép tạo ra một slider chiều ngang với nhiều item
Ví dụ

import { XSlider } from '@xobuilder/ui';

export const Demo = () => {
  return (
    <XSlider perView={8}>
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-01.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-02.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-03.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-06.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-01.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-02.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-03.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-06.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-01.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-02.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-03.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-06.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-01.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-02.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-03.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-06.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-01.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-02.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-03.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-06.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-06.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-01.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-02.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-03.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-06.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-06.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-01.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-02.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-03.svg?v=1712743371" alt="Layout 1" />
      <img src="https://cdn.shopify.com/s/files/1/0677/7900/2622/files/Layout-06.svg?v=1712743371" alt="Layout 1" />
    </XSlider>
  )
}
Props

Name	Type	Default	Description
perView	`number`	`5`	Số lượng hiển thị item trên một view
gap	`number`	`20`	Khoảng cách giữa các item
children	`ReactNode`	-	Nội dung của slider
navSize	`number`	`26`	Kích thước của nút điều hướng
Ví dụ​

Props​

Ví dụ

Props
