{"id":18149424,"url":"https://github.com/kevinfarrugia/react-glider","last_synced_at":"2025-05-15T09:02:15.347Z","repository":{"id":33288995,"uuid":"157595034","full_name":"kevinfarrugia/react-glider","owner":"kevinfarrugia","description":"A ReactJS wrapper for Glider.js","archived":false,"fork":false,"pushed_at":"2025-04-08T10:34:41.000Z","size":2813,"stargazers_count":210,"open_issues_count":10,"forks_count":43,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T14:59:45.479Z","etag":null,"topics":["component","glider","react"],"latest_commit_sha":null,"homepage":"https://react-glider.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kevinfarrugia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-11-14T18:47:33.000Z","updated_at":"2025-03-23T00:20:54.000Z","dependencies_parsed_at":"2023-01-15T00:24:11.218Z","dependency_job_id":"7ae0c278-7736-4851-bb09-17fd79359c88","html_url":"https://github.com/kevinfarrugia/react-glider","commit_stats":{"total_commits":166,"total_committers":16,"mean_commits":10.375,"dds":0.536144578313253,"last_synced_commit":"95d16fa73586382f48b3b2c114b922b2be337d46"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinfarrugia%2Freact-glider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinfarrugia%2Freact-glider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinfarrugia%2Freact-glider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevinfarrugia%2Freact-glider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevinfarrugia","download_url":"https://codeload.github.com/kevinfarrugia/react-glider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310509,"owners_count":22049467,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","glider","react"],"created_at":"2024-11-01T23:41:48.343Z","updated_at":"2025-05-15T09:02:15.324Z","avatar_url":"https://github.com/kevinfarrugia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-glider\n\nA [ReactJS](https://reactjs.org/) wrapper for [Glider.js](https://github.com/NickPiscitelli/Glider.js/).\n\n### [Demo](https://react-glider.vercel.app/) | [Code Sandbox](https://codesandbox.io/s/react-glider-demo-y5klj)\n\n## Quick Start\n\n### Installation:\n\n```sh\nnpm i -s react-glider\n```\n\n### Usage\n\n```\nimport * as React from 'react';\n\nimport Glider from 'react-glider';\nimport 'glider-js/glider.min.css';\n```\n\n```\n\u003cGlider\n  draggable\n  hasArrows\n  hasDots\n  slidesToShow={2}\n  slidesToScroll={1}\n\u003e\n  \u003cdiv\u003e1\u003c/div\u003e\n  \u003cdiv\u003e2\u003c/div\u003e\n  \u003cdiv\u003e3\u003c/div\u003e\n  \u003cdiv\u003e4\u003c/div\u003e\n  \u003cdiv\u003e5\u003c/div\u003e\n\u003c/Glider\u003e\n```\n\n### CSS\n\nTo use the CSS for Glider.js, you may import it from the `npm` module:\n\n```js\nimport \"glider-js/glider.min.css\";\n```\n\nor reference the CSS file in your `\u003chead\u003e` (not recommended):\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/glider-js@1.7.7/glider.min.css\"\n/\u003e\n```\n\n#### Demo Defaults\n\nThis package also exposes the CSS used to render the demo which may also be imported as follows.\n\n**Note that this file is no longer maintained.**\n\n```js\nimport Glider from \"react-glider/glider.defaults.css\";\n```\n\n### Options\n\n| Option           | Description                                                                                                                                                                                                                                                 |\n| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| hasArrows        | Show/hide arrows. (default = false)                                                                                                                                                                                                                         |\n| hasDots          | Show/hide dots. (default = false)                                                                                                                                                                                                                           |\n| iconLeft         | ReactNode for the left arrow. (default = '«')                                                                                                                                                                                                               |\n| iconRight        | ReactNode for the right arrow. (default = '»')                                                                                                                                                                                                              |\n| scrollToSlide    | Starting slide (default = 0)                                                                                                                                                                                                                                |\n| scrollToPage     | Starting page (default = 0)                                                                                                                                                                                                                                 |\n| slidesToShow     | The number of slides to show in container. If this value is set to auto, it will be automatically calculated based upon the number of items able to fit within the container viewport. This requires setting the itemWidth option.                          |\n| slidesToScroll   | The number of slides to scroll when arrow navigation is used. If this value is set to auto, it will match the value of slidesToScroll.                                                                                                                      |\n| itemWidth        | This value is ignored unless slidesToShow is set to auto, in which it is then required.                                                                                                                                                                     |\n| exactWidth       | This prevents resizing items to fit when slidesToShow is set to auto.                                                                                                                                                                                       |\n| resizeLock       | If true, Glider.js will lock to the nearest slide on resizing of the window                                                                                                                                                                                 |\n| rewind           | If true, Glider.js will scroll to the beginning/end when its respective endpoint is reached                                                                                                                                                                 |\n| duration         | An aggravator used to control animation speed. Higher is slower. (default = 0.5)                                                                                                                                                                            |\n| dots             | A string containing the dot container selector                                                                                                                                                                                                              |\n| arrows           | An object containing the prev/next arrows selectors                                                                                                                                                                                                         |\n| draggable        | If true, the list can be scrolled by click and dragging with the mouse. (default = false)                                                                                                                                                                   |\n| dragVelocity     | How much to aggravate the velocity of the mouse dragging. (default = 3.3)                                                                                                                                                                                   |\n| scrollPropagate  | Whether or not to release the scroll events from the container. (default = true)                                                                                                                                                                            |\n| propagateEvent   | Whether or not Glider.js events should bubble (useful for binding events to all carousels). (default = false)                                                                                                                                               |\n| scrollLock       | If true, Glider.js will scroll to the nearest slide after any scroll interactions. (default = false)                                                                                                                                                        |\n| skipTrack        | Whether or not Glider.js should skip wrapping its children with a 'glider-track' `\u003cdiv\u003e`. NOTE: If true, Glider.js will assume that the 'glider-track' element has been added manually. All slides must be children of the track element. (default = false) |\n| scrollLockDelay  | How long (ms) to wait after scroll event before locking, if too low, it might interrupt normal scrolling. (default = 250)                                                                                                                                   |\n| responsive       | An object containing custom settings per provided breakpoint. Glider.js breakpoints are mobile-first, be conscious of your ordering. Supported responsive settings are `slidesToShow`, `slidesToScroll`, `itemWidth`, and `duration`.                       |\n| containerElement | Replace container HTML element.                                                                                                                                                                                                                             |\n| easing           | Use any custom easing function, compatible with most easing plugins.                                                                                                                                                                                        |\n\n### Arrows\n\nIf the Glider component should display arrows, you can configure these using the `arrows` prop.\n\n#### Selectors\n\nThe `arrows` prop supports an object containing `left` and `right` CSS selectors.\n\n```jsx\narrows={{\n  prev: '#buttonPrev',\n  next: '#buttonNext',\n}}\n```\n\n_Note that if you have multiple Glider elements on the same page, you need to assign a different CSS selector to each Glider._\n\n#### Elements\n\nThe `arrows` prop supports an object containing `left` and `right` references to an HTML element.\n\nWhen using native HTML elements:\n\n```jsx\narrows={{\n  prev: document.getElementById(\"prev\"),\n  next: document.getElementById(\"next\")\n}}\n```\n\nWhen using `useRef`:\n\n```jsx\narrows={{\n  prev: leftArrowEl.current,\n  next: rightArrowEl.current,\n}}\n```\n\n_Note that `useRef` will assign a value to `current` after the component has rendered. This means that on the first render, `current` is null._\n\n### Responsive mode\n\nYou can set different settings for different viewport widths.\n\n```jsx\n\u003cGlider\n  slidesToShow={1}\n  scrollLock\n  responsive={[\n    {\n      breakpoint: 864,\n      settings: {\n        slidesToShow: 3,\n      },\n    },\n  ]}\n\u003e\n  {* ... *}\n\u003c/Glider\u003e\n```\n\n_Note that React Glider is designed to be mobile-first, so the order of your breakpoints should be small-to-large._\n\n### Container element\n\nIf you would like to use a custom element or React component as the parent for your slides, you can use the `containerElement` property.\n\n```jsx\nfunction ContainerElement({ children }) {\n  return \u003cdiv className={styles.glider}\u003e{children}\u003c/div\u003e;\n}\n\nfunction MyComponent() {\n  return \u003cGlider\n    slidesToShow={1}\n    containerElement={ContainerElement}\n  \u003e\n    {* ... *}\n  \u003c/Glider\u003e\n}\n```\n\n### Events\n\n| Event          | Description                                                                   |\n| -------------- | ----------------------------------------------------------------------------- |\n| onLoad         | Called after Glider component is initialized.                                 |\n| onAnimated     | Called whenever a Glider.js paging animation is complete                      |\n| onRemove       | Called whenever a Glider.js animation is complete                             |\n| onSlideVisible | Called whenever a slide a shown. Passed an object containing the slide index  |\n| onRefresh      | Called whenever Glider.js refreshes it's elements or settings                 |\n| onAdd          | Called whenever an item is added to Glider.js                                 |\n| onDestroy      | Called whenever a Glider.js is destroyed                                      |\n| onSlideHidden  | Called whenever a slide a hidden. Passed an object containing the slide index |\n\n### Glider Methods\n\nTo get access to the current glider instance this react component exposes a ref.\n\n```tsx\nfunction Example() {\n  const gliderRef = useRef\u003cGliderMethods\u003e(null);\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\n        type=\"button\"\n        onClick={() =\u003e {\n          const random = Math.floor(Math.random() * 12);\n          gliderRef.current?.scrollItem(random);\n        }}\n      \u003e\n        Scroll to random item\n      \u003c/button\u003e\n      \u003cGlider\n        className=\"glider-container\"\n        draggable\n        hasDots\n        slidesToShow={1}\n        scrollLock\n        ref={gliderRef}\n      \u003e\n        \u003cdiv\u003e\n          \u003cspan\u003e1\u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/Glider\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Perspective View\n\nThe CSS for the [perspective view](https://kevinfarrugia.github.io/react-glider/?path=/story/glider--perspective-view) is not included in `Glider.js` or this package. You can find it in [`perspective.css`](https://github.com/kevinfarrugia/react-glider/blob/master/docs/perspective.css). Please do not file bugs for it as I do not want to support it.\n\n### Examples\n\nYou may view the examples used in the _docs_ page in the [./examples](https://github.com/kevinfarrugia/react-glider/blob/master/examples) directory.\n\n## FAQs\n\n### Can I replace `react-slick` with `react-glider`?\n\nIf you are interested in migrating from [`react-slick`](https://www.npmjs.com/package/react-slick), please note that `react-glider` only includes a subset of the features available in `react-slick`. Most notably, `react-glider` doesn't include variable width or custom transitions, while autoplay must be handled by you. If you are using `react-slick` as a carousel to list elements, `react-slick` probably includes more features than you need. In such cases, replacing it with `react-glider` would reduce the JavaScript KBs while providing your users with a jank-free experience.\n\n### How can I remove the ESLint warning `import/no-extraneous-dependencies`?\n\n[`import/no-extraneous-dependencies`](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-extraneous-dependencies.md) requires that all dependencies are included in the project's `package.json` file. Since the CSS file is generated by `glider-js`, it will not be listed in your `package.json` file. The preferred option would be to create a local CSS file containing the [`glider.css`](https://github.com/NickPiscitelli/Glider.js/blob/master/glider.css) file's contents. Alternatively, you may disable the eslint warning for that line. We do not recommend installing `glider-js` as a dependency in your package as you would then be responsible for maintaining the `glider-js` and `react-glider` dependencies in your project.\n\n### Can I customize the appearance of the dots/pagination elements?\n\nYou may customize the dots by overriding the CSS for `.glider-dots` and `glider-dot`.\n\nAlternatively, you may pass a CSS selector to the `dots` property to assign a DOM element as the container for the Glider's pagination. This allows you to override the CSS for `.glider-dots` using CSS specificity.\n\n```\n.my-dots-container.glider-dots {\n  /* ... */\n}\n```\n\nThis is also possible when using CSS modules and allows you to have multiple Glider components on the same page, each with different styles.\n\n```jsx\n\u003cdiv className={styles.banner}\u003e\n  \u003cGlider\n    dots={`.${style.dots}`}\n    slidesToShow={1}\n  \u003e\n    {* ... *}\n  \u003c/Glider\u003e\n  \u003cdiv className={style.dots} /\u003e\n\u003c/div\u003e\n```\n\n### Can I lazyload images on inactive slides?\n\nThe recommended approach for lazy loading images is to use the browser's `loading=\"lazy\"` implementation. You can use the slide's index to know which images should have the attribute set.\n\n### Which browsers are supported?\n\nAs `react-glider` is a wrapper for `Glider.js`, it should run on all modern browsers. Support for older browsers can be achieved by polyfilling `document.classList`, `window.requestAnimationFrame`, `Object.assign` and `CustomEvent`.\n\n## Developing\n\n```sh\nyarn\nyarn dev\n```\n\n## License and Copyright\n\nThis software is released under the terms of the [MIT license](https://github.com/kevinfarrugia/react-glider/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinfarrugia%2Freact-glider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevinfarrugia%2Freact-glider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevinfarrugia%2Freact-glider/lists"}