{"id":17617415,"url":"https://github.com/morevm/vue-swiper","last_synced_at":"2025-04-30T18:12:29.705Z","repository":{"id":37035566,"uuid":"489051769","full_name":"MorevM/vue-swiper","owner":"MorevM","description":"Latest Swiper with extra features.  For Vue 2 + SSR.","archived":false,"fork":false,"pushed_at":"2024-04-21T22:39:05.000Z","size":2741,"stargazers_count":3,"open_issues_count":15,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-30T18:12:22.458Z","etag":null,"topics":["slider","swiper","vue2"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/MorevM.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2022-05-05T16:40:51.000Z","updated_at":"2024-09-07T00:00:33.000Z","dependencies_parsed_at":"2024-04-21T23:42:16.477Z","dependency_job_id":"92dd9fe0-b345-4ea0-9886-00fd7c54ed6d","html_url":"https://github.com/MorevM/vue-swiper","commit_stats":{"total_commits":16,"total_committers":2,"mean_commits":8.0,"dds":0.0625,"last_synced_commit":"47b39f3e32489e82c01bbebdefde9b69f5786717"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fvue-swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fvue-swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fvue-swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MorevM%2Fvue-swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MorevM","download_url":"https://codeload.github.com/MorevM/vue-swiper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251758173,"owners_count":21638989,"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":["slider","swiper","vue2"],"created_at":"2024-10-22T19:13:37.482Z","updated_at":"2025-04-30T18:12:29.674Z","avatar_url":"https://github.com/MorevM.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @morev/vue-swiper (still WIP)\n\n![Stability of \"master\" branch](https://img.shields.io/github/workflow/status/MorevM/vue-swiper/Build/master)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n![Last commit](https://img.shields.io/github/last-commit/morevm/vue-swiper)\n![Release version](https://img.shields.io/github/v/release/morevm/vue-swiper?include_prereleases)\n![GitHub Release Date](https://img.shields.io/github/release-date/morevm/vue-swiper)\n![Keywords](https://img.shields.io/github/package-json/keywords/morevm/vue-swiper)\n\nWrapper under latest [Swiper](https://swiperjs.com/) (8.4.2) with extra features working with Vue 2. \\\nSSR / Nuxt friendly.\n\nMost of part API is compatible with original [Swiper Vue](https://swiperjs.com/vue) component, so see the provided link for base docs.\n\n## Changes from original Swiper Vue component\n\n* If your environment (such as `Nuxt 2` in context of webpack) doesn't support resolution of `exports` field in `package.json`,\n  you need to import stylesheets by direct path. \\\n  Original Swiper module places files in package root, this package re-exports it in `dist` folder. So:\n\n  ```js\n  // Original package direct imports\n  import '~swiper/swiper.min.css'\n  import '~swiper/modules/pagination/pagination.min.css'\n\n  // This package handles it another way\n  import '~@morev/vue-swiper/dist/swiper.min.css'\n  import '~@morev/vue-swiper/dist/modules/pagination/pagination.min.css'\n  ```\n\n  If your environment can resolve `exports` field in `package.json` there is no changes,\n  just change the package name from `swiper` to `@morev/vue-swiper`.\n* There is no typings (WIP)\n\n## Extra features\n\nUnfortunately, I currently have no time to do proper documentation, playground and even tests, so here is just short info about extra features:\n\n* **prop `lazyInit`** - boolean \\\n  Allows to initialize Swiper only when it becomes visible (utilizing IntersectionObserver under the hood)\n\n* **prop `disabled`** - boolean \\\n  Allows to render the default `\u003cslot\u003e\u003c/slot\u003e` content without swiper layout. \\\n  Just an wrapper called `swiper-root` and slot content inside. \\\n  This is suitable, for example, for blocks that have a grid layout on the desktop and turn into a slider on mobile devices.\n  \u003e In this case you don't need to wrap each element in `\u003cswiper-slide\u003e` component - plugin will do it for you.\n\n* **prop `emitStyle`** - string (`camelCase` (default) or `kebab-case`) \\\n  Allows to customize emits style. By default Swiper utilizes `@camelCasedEvents`, but if you prefer (like me) `@kebab-cased-events`\n  you can set this prop to `kebab-case`. Just a stylistic thing.\n  \u003e In Vue 3 there is no difference between `@onEvent` and `@on-event`, but Vue 2 handles them different.\n\n* **prop `bemBlock`** - string \\\n  If you prefer (like me) to use BEM methodology, plugin can set BEM classes\n  to Swiper elements alongside the Swiper classes (`.swiper`, `.swiper-wrapper`, etc). \\\n  So, if `bem-block=\"foo\"` is passed, then you can access swiper elements like `.foo__swiper-wrapper`, `.foo__swiper-slide`, etc.\n\n* **prop `navigationWrap`** - boolean \\\n  Allows to wrap automatically created elements `.swiper-button-prev` and `.swiper-button-next` to common container `.swiper-navigation`. \\\n  That's can be useful for custom styling.\n\n* **prop `navigationOutside`** - boolean \\\n  Allows to render automatically created Navigation outside of `.swiper` element (which has `overflow: hidden` by design).\n\n* **prop `paginationWrap`** - boolean \\\n  Wraps automatically created `.swiper-pagination` to extra wrapper `.swiper-pagination-wrapper`. \\\n  That's can be useful for custom styling.\n\n* **prop `paginationOutside`** \\\n  Allows to render automatically created Pagination outside of `.swiper` element (which has `overflow: hidden` by design).\n\n* **prop `scrollbarWrap`** - boolean \\\n  Wraps automatically created `.swiper-scrollbar` to extra wrapper `.swiper-scrollbar-wrapper`. \\\n  That's can be useful for custom styling.\n\n* **prop `scrollbarOutside`** \\\n  Allows to render automatically created Scrollbar outside of `.swiper` element (which has `overflow: hidden` by design).\n\n* **props `rootTag` and `rootClass`** \\\n  Because of `navigationOutside`, `paginationOutside` and `scrollbarOutside` all swiper markup should be wrapped with extra node. \\\n  Those props allows to customize tagName and className of this element.\n\n* Slides have the `not-initialized` class before swiper is initialized. \\\n  It allows to style them properly before initialization (during SSR / hydration) to minimize CLS.\n\n## Installation\n\n\u003e Note: You don't need to install Swiper alongside this package -\n\u003e it has Swiper as dependency and re-exports all things you need such as modules / stylesheets.\n\n### Using `yarn`\n\n```bash\nyarn add @morev/vue-swiper\n```\n\n### Using `npm`\n\n```bash\nnpm install @morev/vue-swiper\n```\n\n### Using `pnpm`\n\n```bash\npnpm add @morev/vue-swiper\n```\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cswiper\n    :slidesPerView=\"3\"\n    :spaceBetween=\"20\"\n    :navigation=\"true\"\n    :modules=\"modules\"\n  \u003e\n    \u003cswiper-slide\u003eSlide 1\u003c/swiper-slide\u003e\n    \u003cswiper-slide\u003eSlide 2\u003c/swiper-slide\u003e\n    \u003cswiper-slide\u003eSlide 3\u003c/swiper-slide\u003e\n    \u003c!-- ... --\u003e\n  \u003c/swiper\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { Swiper, SwiperSlide, Navigation } from '@morev/vue-swiper';\n  import '@morev/vue-swiper/dist/swiper-bundle.min.css';\n\n  export default {\n    components: {\n      Swiper,\n      SwiperSlide,\n    },\n    data: () =\u003e ({\n      modules: [Navigation],\n    }),\n  };\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorevm%2Fvue-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorevm%2Fvue-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorevm%2Fvue-swiper/lists"}