{"id":13421915,"url":"https://github.com/kidjp85/react-id-swiper","last_synced_at":"2025-05-14T15:11:28.109Z","repository":{"id":40827511,"uuid":"55473798","full_name":"kidjp85/react-id-swiper","owner":"kidjp85","description":"A library to use idangerous Swiper as a ReactJs component which allows Swiper's modules custom build","archived":false,"fork":false,"pushed_at":"2023-05-06T09:39:48.000Z","size":5325,"stargazers_count":1487,"open_issues_count":108,"forks_count":153,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-10T11:01:39.472Z","etag":null,"topics":["idangerous","react-carousel","react-id-swiper","react-native-swiper","react-slider","react-slider-component","react-swiper","swiper","swiper-component"],"latest_commit_sha":null,"homepage":"https://react-id-swiper.ashernguyen.site/","language":"JavaScript","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/kidjp85.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}},"created_at":"2016-04-05T06:35:47.000Z","updated_at":"2025-04-28T15:48:28.000Z","dependencies_parsed_at":"2024-04-17T11:34:23.786Z","dependency_job_id":"dabc96c3-8016-45ce-bf83-83a14575b918","html_url":"https://github.com/kidjp85/react-id-swiper","commit_stats":{"total_commits":112,"total_committers":17,"mean_commits":6.588235294117647,"dds":0.3928571428571429,"last_synced_commit":"dc9eed56aad055a50cdd5415e8e899184f2c6665"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kidjp85%2Freact-id-swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kidjp85%2Freact-id-swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kidjp85%2Freact-id-swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kidjp85%2Freact-id-swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kidjp85","download_url":"https://codeload.github.com/kidjp85/react-id-swiper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254170059,"owners_count":22026219,"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":["idangerous","react-carousel","react-id-swiper","react-native-swiper","react-slider","react-slider-component","react-swiper","swiper","swiper-component"],"created_at":"2024-07-30T23:00:33.826Z","updated_at":"2025-05-14T15:11:28.068Z","avatar_url":"https://github.com/kidjp85.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/kidjp85"],"categories":["UI Components","JavaScript","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Carousel","Carousels"],"readme":"[![npm Version](https://img.shields.io/npm/v/react-id-swiper.svg?style=flat-square)](https://npmjs.org/package/react-id-swiper)\n[![Coverage Status](https://img.shields.io/codecov/c/github/moroshko/react-autosuggest/master.svg?style=flat-square)](https://codecov.io/gh/kidjp85/react-id-swiper)\n[![Weekly download](https://img.shields.io/npm/dw/react-id-swiper.svg?style=flat-square)](https://npmjs.org/package/react-id-swiper)\n[![Total Downloads](https://img.shields.io/npm/dt/react-id-swiper.svg?style=flat-square)](https://npmjs.org/package/react-id-swiper)\n[![Build Status](https://travis-ci.org/kidjp85/react-id-swiper.svg?branch=master)](https://travis-ci.org/kidjp85/react-id-swiper)\n\n[![Package Quality](http://npm.packagequality.com/badge/react-id-swiper.png)](http://packagequality.com/#?package=react-id-swiper)\n\nreact-id-swiper ( Newest version 4.0.0 )\n========================================\n\u003e A library to use [Swiper](http://www.idangero.us/swiper/get-started/) as a ReactJs component\n\n![Demo](https://media.giphy.com/media/mByDrCTcJch4HVhmfi/giphy.gif)\n\nWhat is Swiper?\n===============\n\nSwiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.\n\nIt is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers.\n\nSwiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity. Swiper does work well with [Gatsby](https://www.gatsbyjs.org/).\n\n# Props\n\n| Name               | Type     | Default value    | Description                                      |\n| ------------------ | -------- | ---------------- | -------------------------------------------------|\n| ContainerEl        | String   | 'div'            | Element type for container                       |\n| containerClass     | String   | swiper-container | Swiper container class name                      |\n| WrapperEl          | String   | 'div'            | Element type for wrapper                         |\n| wrapperClass       | String   | swiper-wrapper   | Swiper wrapper class name                        |\n| slideClass         | String   | swiper-slide     | Swiper slide class name                          |\n| shouldSwiperUpdate | Boolean  | false            | Update swiper when component is updated          |\n| rebuildOnUpdate    | Boolean  | false            | Rebuild swiper when component is updated         |\n| noSwiping          | Boolean  | false            | Disable swiping by condition                     |\n| activeSlideKey     | String   | null             | Initial slide index                              |\n| renderPrevButton   | function |                  | Render props function for prev button            |\n| renderNextButton   | function |                  | Render props function for next button            |\n| renderScrollbar    | function |                  | Render props function for scrollbar              |\n| renderPagination   | function |                  | Render props function for pagination             |\n| renderParallax     | function |                  | Render props function for parallax               |\n\n**If you want to use Swiper custom build to reduce bundle size, you need to use extra props below.**\n\n# Custom build extra props\n\n| Name               | Type     | Default value    | Description                                      |\n| ------------------ | -------- | ---------------- | -------------------------------------------------|\n| Swiper             | Class    |                  | Swiper class                                     |\n| modules            | array    |                  | Array of Swiper necessary modules                |\n\n\n**NOTE:**\n\n* You can also use Swiper's original params too. Swiper API documentation [HERE](http://idangero.us/swiper/api/)\n* Find more info about Swiper custom build [HERE](https://idangero.us/swiper/api/#custom-build)\n* [\u003c= 3.x documentation](docs/3.x-document.md)\n\n# Documentation\n\n- [Get Started](https://react-id-swiper.ashernguyen.site/doc/get-started)\n- [API](https://react-id-swiper.ashernguyen.site/doc/api)\n- [Custom Build](https://react-id-swiper.ashernguyen.site/doc/custom-build)\n- [Examples](https://react-id-swiper.ashernguyen.site/example/default)\n\n# Installation and setup\n\n- From version 2.0.0, it requires **React \u0026 ReactDOM ver \u003e=16.8.0** to use [Hooks](https://reactjs.org/docs/hooks-intro.html)\n- From version 2.4.0, it requires **Swiper ver \u003e= 5.0.0**\n\n## Npm package\n\n\u003e By npm\n\n```bash\nnpm install --save react-id-swiper@latest swiper@latest\n```\n\n\u003e By Yarn\n\n```bash\nyarn add react-id-swiper@latest swiper@latest\n```\n\n## CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/react-id-swiper@3.0.0/lib/react-id-swiper.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003cscript src=\"https://unpkg.com/react-id-swiper@3.0.0/lib/react-id-swiper.min.js\"\u003e\u003c/script\u003e\n```\n\n# Styling\n\n**Swiper stylesheet file is required**\n\nUse Swiper stylesheet file from CDN\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/swiper/css/swiper.css\"\u003e\n```\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/swiper/css/swiper.min.css\"\u003e\n```\n\n**Or from Swiper package**\n\nYou should import directly from `Swiper` package which supports css, scss and less\n\n\u003e css\n\n```javascript\nimport 'swiper/css/swiper.css'\n```\n\n\u003e scss\n\n```javascript\nimport 'swiper/swiper.scss'\n```\n\n\u003e less\n\n```javascript\nimport 'swiper/swiper.less'\n```\n\n# Examples\n\n## Live Examples\n\n[Codesandbox Live Examples](docs/live-examples.md)\n\n## Default\n\n```javascript\nimport React from 'react';\nimport Swiper from 'react-id-swiper';\nimport 'swiper/css/swiper.css';\n\nconst SimpleSwiper = () =\u003e (\n  \u003cSwiper\u003e\n    \u003cdiv\u003eSlide 1\u003c/div\u003e\n    \u003cdiv\u003eSlide 2\u003c/div\u003e\n    \u003cdiv\u003eSlide 3\u003c/div\u003e\n    \u003cdiv\u003eSlide 4\u003c/div\u003e\n    \u003cdiv\u003eSlide 5\u003c/div\u003e\n  \u003c/Swiper\u003e\n)\n\nexport default SimpleSwiper;\n```\n\n## Using params\n\n```javascript\nimport React from 'react';\nimport Swiper from 'react-id-swiper';\n\nconst SimpleSwiperWithParams = () =\u003e {\n  const params = {\n    pagination: {\n      el: '.swiper-pagination',\n      type: 'bullets',\n      clickable: true\n    },\n    navigation: {\n      nextEl: '.swiper-button-next',\n      prevEl: '.swiper-button-prev'\n    },\n    spaceBetween: 30\n  }\n\n  return(\n    \u003cSwiper {...params}\u003e\n      \u003cdiv\u003eSlide 1\u003c/div\u003e\n      \u003cdiv\u003eSlide 2\u003c/div\u003e\n      \u003cdiv\u003eSlide 3\u003c/div\u003e\n      \u003cdiv\u003eSlide 4\u003c/div\u003e\n      \u003cdiv\u003eSlide 5\u003c/div\u003e\n    \u003c/Swiper\u003e\n  )\n}\n\nexport default SimpleSwiperWithParams;\n```\n\n## Manipulating swiper from outside swiper component\n\n```javascript\nimport React, { useRef } from 'react';\nimport Swiper from 'react-id-swiper';\n\nconst ManipulatingSwiper = () =\u003e {\n  const ref = useRef(null);\n\n  const ref = useRef(null);\n\n  const goNext = () =\u003e {\n    if (ref.current !== null \u0026\u0026 ref.current.swiper !== null) {\n      ref.current.swiper.slideNext();\n    }\n  };\n\n  const goPrev = () =\u003e {\n    if (ref.current !== null \u0026\u0026 ref.current.swiper !== null) {\n      ref.current.swiper.slidePrev();\n    }\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cSwiper ref={ref}\u003e\n        \u003cdiv\u003eSlide 1\u003c/div\u003e\n        \u003cdiv\u003eSlide 2\u003c/div\u003e\n        \u003cdiv\u003eSlide 3\u003c/div\u003e\n        \u003cdiv\u003eSlide 4\u003c/div\u003e\n        \u003cdiv\u003eSlide 5\u003c/div\u003e\n      \u003c/Swiper\u003e\n      \u003cbutton onClick={goPrev}\u003ePrev\u003c/button\u003e\n      \u003cbutton onClick={goNext}\u003eNext\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default ManipulatingSwiper;\n```\n\n## Custom build Swiper\n\nYou can find the [WORKING DEMO REPO HERE](https://github.com/kidjp85/react-id-swiper-custom-build)\n\n```javascript\nimport React from 'react';\nimport ReactIdSwiperCustom from 'react-id-swiper/lib/ReactIdSwiper.custom';\nimport { Swiper, Navigation, Pagination } from 'swiper/js/swiper.esm';\n\nconst CustomBuildSwiper = () =\u003e {\n  const params = {\n    // Provide Swiper class as props\n    Swiper,\n    // Add modules you need\n    modules: [Navigation, Pagination],\n    pagination: {\n      el: '.swiper-pagination',\n      type: 'bullets',\n      clickable: true\n    },\n    navigation: {\n      nextEl: '.swiper-button-next',\n      prevEl: '.swiper-button-prev'\n    },\n    spaceBetween: 30\n  }\n\n  return(\n    \u003cReactIdSwiperCustom {...params}\u003e\n      \u003cdiv\u003eSlide 1\u003c/div\u003e\n      \u003cdiv\u003eSlide 2\u003c/div\u003e\n      \u003cdiv\u003eSlide 3\u003c/div\u003e\n      \u003cdiv\u003eSlide 4\u003c/div\u003e\n      \u003cdiv\u003eSlide 5\u003c/div\u003e\n    \u003c/ReactIdSwiperCustom\u003e\n  )\n}\n\nexport default CustomBuildSwiper;\n```\n\n**NOTE**:\n\n* If you use Webpack \u0026 Babel you need to setup Babel loader config in `webpack.config.js` like below:\n\n```javascript\nmodule: {\n  rules: [\n    {\n      exclude: [/node_modules\\/(?!(swiper|dom7)\\/).*/, /\\.test\\.js(x)?$/],\n      test: /\\.js(x)?$/,\n      use: [{ loader: 'babel-loader' }],\n    }\n  ],\n}\n```\n\n## Adding customized css classes\n\n```javascript\nconst params = {\n  pagination: {\n    el: '.swiper-pagination.customized-swiper-pagination',\n  }, // Add your class name for pagination container\n  navigation: {\n    nextEl: '.swiper-button-next.customized-swiper-button-next', // Add your class name for next button\n    prevEl: '.swiper-button-prev.customized-swiper-button-prev' // Add your class name for prev button\n  },\n  containerClass: 'customized-swiper-container' // Replace swiper-container with customized-swiper-container\n}\n```\n\n## Adding customized components\n\nFor customized rendering to work, you have to use same classname with params el.\n\n```javascript\nconst params = {\n  navigation: {\n    nextEl: '.swiper-button-next',\n    prevEl: '.swiper-button-prev'\n  },\n  renderPrevButton: () =\u003e \u003cbutton className=\"swiper-button-prev\"\u003ePrev\u003c/button\u003e,\n  renderNextButton: () =\u003e \u003cbutton className=\"swiper-button-next\"\u003eNext\u003c/button\u003e,\n}\n```\n\n## Workable slides\n\nEach slide should be wrapped by HTML element\n\n\u003e BAD CODE :thumbsdown:\n\n```javascript\n\u003cSwiper {...params}\u003e\n  Slide content\n\u003c/Swiper\u003e\n```\n\n\u003e GOOD CODE :thumbsup:\n\n```javascript\n\u003cSwiper {...params}\u003e\n  \u003cspan\u003eSlide content\u003c/span\u003e\n\u003c/Swiper\u003e\n```\n\n# Bug report\n\n**Please use the prepared Codesanbox below to reproduce your issue. Thank you!!**\n\n[![Edit ReactIdSwiper - DEMO](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/p8j61y7j7?fontsize=14)\n\n\n# Authors\n\n* **Asher Nguyen** - *Initial work* - [Asher Nguyen](https://github.com/kidjp85)\n\nSee also the list of [contributors](https://github.com/kidjp85/react-id-swiper/contributors) who participated in this project.\n\n\n# Buy me a coffee\n\n\u003ca href=\"https://www.buymeacoffee.com/kidjp85\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-green.png\" alt=\"Buy Me A Coffee\" height=\"40\"\u003e\u003c/a\u003e\n\n# License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkidjp85%2Freact-id-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkidjp85%2Freact-id-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkidjp85%2Freact-id-swiper/lists"}