{"id":20643363,"url":"https://github.com/coderboy-raiyan/swiper-js-guidline","last_synced_at":"2025-10-13T10:41:27.210Z","repository":{"id":104919453,"uuid":"434475630","full_name":"coderboy-raiyan/Swiper-js-guidline","owner":"coderboy-raiyan","description":"I have created this repo for beginners who have facing problems when they use swiper js with react.","archived":false,"fork":false,"pushed_at":"2021-12-03T06:52:37.000Z","size":218,"stargazers_count":16,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-16T02:05:23.034Z","etag":null,"topics":["reactjs","swiper-js"],"latest_commit_sha":null,"homepage":"https://swiper-raiyan-io.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coderboy-raiyan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2021-12-03T05:20:13.000Z","updated_at":"2024-05-20T07:27:37.000Z","dependencies_parsed_at":"2023-05-27T02:45:26.018Z","dependency_job_id":null,"html_url":"https://github.com/coderboy-raiyan/Swiper-js-guidline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/coderboy-raiyan/Swiper-js-guidline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderboy-raiyan%2FSwiper-js-guidline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderboy-raiyan%2FSwiper-js-guidline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderboy-raiyan%2FSwiper-js-guidline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderboy-raiyan%2FSwiper-js-guidline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coderboy-raiyan","download_url":"https://codeload.github.com/coderboy-raiyan/Swiper-js-guidline/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coderboy-raiyan%2FSwiper-js-guidline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279014647,"owners_count":26085555,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["reactjs","swiper-js"],"created_at":"2024-11-16T16:12:36.499Z","updated_at":"2025-10-13T10:41:27.195Z","avatar_url":"https://github.com/coderboy-raiyan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to use Swiper js for beginners with react js\n\n## Demo\n\n[Demo Page](https://swiper-raiyan-io.netlify.app/)\n\n## Installation\n\nWith Yarn:\n\n```bash\nyarn add swiper@6.8.4\n```\n\nWith npm:\n\n```bash\nnpm install --save swiper@6.8.4\n```\n\n## Usage\n\n```\nImport these files :\n\n\u003c!-- Import these CSS files first because there is no css files for swiper latest version--\u003e\n\nimport \"swiper/swiper-bundle.min.css\";\nimport \"swiper/swiper.min.css\";\n\n\u003c!--Then you can import these form here--\u003e\n\nimport SwiperCore, { Autoplay, Navigation, Pagination } from \"swiper\";\nimport { Swiper, SwiperSlide } from \"swiper/react\";\n\n```\n\n### Example No - 1\n\n```js\nimport React from \"react\";\nimport SwiperCore, { EffectCoverflow, Pagination } from \"swiper\";\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport \"swiper/swiper-bundle.min.css\";\nimport \"swiper/swiper.min.css\";\nimport \"./App.css\";\n\nSwiperCore.use([EffectCoverflow, Pagination]);\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cSwiper\n        effect={\"coverflow\"}\n        grabCursor={true}\n        centeredSlides={true}\n        slidesPerView={\"auto\"}\n        coverflowEffect={{\n          rotate: 50,\n          stretch: 0,\n          depth: 100,\n          modifier: 1,\n          slideShadows: false,\n        }}\n        pagination={true}\n        className=\"mySwiper\"\n      \u003e\n        \u003cSwiperSlide\u003e\n          \u003cimg src=\"https://swiperjs.com/demos/images/nature-1.jpg\" alt=\"\" /\u003e\n        \u003c/SwiperSlide\u003e\n        \u003cSwiperSlide\u003e\n          \u003cimg src=\"https://swiperjs.com/demos/images/nature-2.jpg\" alt=\"\" /\u003e\n        \u003c/SwiperSlide\u003e\n        \u003cSwiperSlide\u003e\n          \u003cimg src=\"https://swiperjs.com/demos/images/nature-3.jpg\" alt=\"\" /\u003e\n        \u003c/SwiperSlide\u003e\n        \u003cSwiperSlide\u003e\n          \u003cimg src=\"https://swiperjs.com/demos/images/nature-4.jpg\" alt=\"\" /\u003e\n        \u003c/SwiperSlide\u003e\n        \u003cSwiperSlide\u003e\n          \u003cimg src=\"https://swiperjs.com/demos/images/nature-5.jpg\" alt=\"\" /\u003e\n        \u003c/SwiperSlide\u003e\n        \u003cSwiperSlide\u003e\n          \u003cimg src=\"https://swiperjs.com/demos/images/nature-6.jpg\" alt=\"\" /\u003e\n        \u003c/SwiperSlide\u003e\n        \u003cSwiperSlide\u003e\n          \u003cimg src=\"https://swiperjs.com/demos/images/nature-7.jpg\" alt=\"\" /\u003e\n        \u003c/SwiperSlide\u003e\n        \u003cSwiperSlide\u003e\n          \u003cimg src=\"https://swiperjs.com/demos/images/nature-8.jpg\" alt=\"\" /\u003e\n        \u003c/SwiperSlide\u003e\n        \u003cSwiperSlide\u003e\n          \u003cimg src=\"https://swiperjs.com/demos/images/nature-9.jpg\" alt=\"\" /\u003e\n        \u003c/SwiperSlide\u003e\n      \u003c/Swiper\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### Example No - 2\n\n```js\nimport React from \"react\";\nimport SwiperCore, { EffectCoverflow, Pagination } from \"swiper\";\nimport { Swiper, SwiperSlide } from \"swiper/react\";\nimport \"swiper/swiper-bundle.min.css\";\nimport \"swiper/swiper.min.css\";\nimport \"./App.css\";\n\nSwiperCore.use([EffectCoverflow, Pagination]);\n// if you want to use array\nconst slide_img = [\n  \"https://swiperjs.com/demos/images/nature-1.jpg\",\n  \"https://swiperjs.com/demos/images/nature-2.jpg\",\n  \"https://swiperjs.com/demos/images/nature-3.jpg\",\n  \"https://swiperjs.com/demos/images/nature-4.jpg\",\n  \"https://swiperjs.com/demos/images/nature-5.jpg\",\n  \"https://swiperjs.com/demos/images/nature-6.jpg\",\n  \"https://swiperjs.com/demos/images/nature-7.jpg\",\n  \"https://swiperjs.com/demos/images/nature-8.jpg\",\n  \"https://swiperjs.com/demos/images/nature-9.jpg\",\n];\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cSwiper\n        effect={\"coverflow\"}\n        grabCursor={true}\n        centeredSlides={true}\n        slidesPerView={\"auto\"}\n        coverflowEffect={{\n          rotate: 50,\n          stretch: 0,\n          depth: 100,\n          modifier: 1,\n          slideShadows: false,\n        }}\n        pagination={true}\n        className=\"mySwiper\"\n      \u003e\n        // Using array\n        {slide_img.map((img, i) =\u003e {\n          return (\n            \u003cSwiperSlide key={i}\u003e\n              \u003cimg src={img} alt=\"\" /\u003e\n            \u003c/SwiperSlide\u003e\n          );\n        })}\n      \u003c/Swiper\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### Include CSS\n\n```css\n/* At last you have to copy these css styles from here ,Create a CSS file and paste it and import the file */\n\n/* Also you can customize these css styles*/\n\n/* In my case, I use these CSS styles in my App.css file*/\n.swiper {\n  width: 100%;\n  padding-top: 50px;\n  padding-bottom: 50px;\n}\n\n.swiper-slide {\n  background-position: center;\n  background-size: cover;\n  width: 300px;\n  height: 300px;\n}\n\n.swiper-slide img {\n  display: block;\n  width: 100%;\n}\n```\n\n## 🚀 Connect with me\n\n[![Facebook Badge](https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge\u0026logo=facebook\u0026logoColor=white)](https://www.facebook.com/tajkierhaque/)\n[![Instagram Badge](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge\u0026logo=instagram\u0026logoColor=white)](https://www.instagram.com/tajkier_haque/)\n[![Linkedin Badge](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/tajkier-haque/)\n[![Github Badge](https://img.shields.io/badge/GitHub-100000?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/coderboy-raiyan)\n[![Mail Badge](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge\u0026logo=gmail\u0026logoColor=white)](mailto:tajkierhaque@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderboy-raiyan%2Fswiper-js-guidline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoderboy-raiyan%2Fswiper-js-guidline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoderboy-raiyan%2Fswiper-js-guidline/lists"}