https://github.com/morevm/vue-swiper
Latest Swiper with extra features. For Vue 2 + SSR.
https://github.com/morevm/vue-swiper
slider swiper vue2
Last synced: over 1 year ago
JSON representation
Latest Swiper with extra features. For Vue 2 + SSR.
- Host: GitHub
- URL: https://github.com/morevm/vue-swiper
- Owner: MorevM
- License: mit
- Created: 2022-05-05T16:40:51.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-21T22:39:05.000Z (over 2 years ago)
- Last Synced: 2025-04-30T18:12:22.458Z (over 1 year ago)
- Topics: slider, swiper, vue2
- Language: Vue
- Homepage:
- Size: 2.61 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @morev/vue-swiper (still WIP)
[](https://opensource.org/licenses/MIT)
Wrapper under latest [Swiper](https://swiperjs.com/) (8.4.2) with extra features working with Vue 2. \
SSR / Nuxt friendly.
Most of part API is compatible with original [Swiper Vue](https://swiperjs.com/vue) component, so see the provided link for base docs.
## Changes from original Swiper Vue component
* If your environment (such as `Nuxt 2` in context of webpack) doesn't support resolution of `exports` field in `package.json`,
you need to import stylesheets by direct path. \
Original Swiper module places files in package root, this package re-exports it in `dist` folder. So:
```js
// Original package direct imports
import '~swiper/swiper.min.css'
import '~swiper/modules/pagination/pagination.min.css'
// This package handles it another way
import '~@morev/vue-swiper/dist/swiper.min.css'
import '~@morev/vue-swiper/dist/modules/pagination/pagination.min.css'
```
If your environment can resolve `exports` field in `package.json` there is no changes,
just change the package name from `swiper` to `@morev/vue-swiper`.
* There is no typings (WIP)
## Extra features
Unfortunately, I currently have no time to do proper documentation, playground and even tests, so here is just short info about extra features:
* **prop `lazyInit`** - boolean \
Allows to initialize Swiper only when it becomes visible (utilizing IntersectionObserver under the hood)
* **prop `disabled`** - boolean \
Allows to render the default `` content without swiper layout. \
Just an wrapper called `swiper-root` and slot content inside. \
This is suitable, for example, for blocks that have a grid layout on the desktop and turn into a slider on mobile devices.
> In this case you don't need to wrap each element in `` component - plugin will do it for you.
* **prop `emitStyle`** - string (`camelCase` (default) or `kebab-case`) \
Allows to customize emits style. By default Swiper utilizes `@camelCasedEvents`, but if you prefer (like me) `@kebab-cased-events`
you can set this prop to `kebab-case`. Just a stylistic thing.
> In Vue 3 there is no difference between `@onEvent` and `@on-event`, but Vue 2 handles them different.
* **prop `bemBlock`** - string \
If you prefer (like me) to use BEM methodology, plugin can set BEM classes
to Swiper elements alongside the Swiper classes (`.swiper`, `.swiper-wrapper`, etc). \
So, if `bem-block="foo"` is passed, then you can access swiper elements like `.foo__swiper-wrapper`, `.foo__swiper-slide`, etc.
* **prop `navigationWrap`** - boolean \
Allows to wrap automatically created elements `.swiper-button-prev` and `.swiper-button-next` to common container `.swiper-navigation`. \
That's can be useful for custom styling.
* **prop `navigationOutside`** - boolean \
Allows to render automatically created Navigation outside of `.swiper` element (which has `overflow: hidden` by design).
* **prop `paginationWrap`** - boolean \
Wraps automatically created `.swiper-pagination` to extra wrapper `.swiper-pagination-wrapper`. \
That's can be useful for custom styling.
* **prop `paginationOutside`** \
Allows to render automatically created Pagination outside of `.swiper` element (which has `overflow: hidden` by design).
* **prop `scrollbarWrap`** - boolean \
Wraps automatically created `.swiper-scrollbar` to extra wrapper `.swiper-scrollbar-wrapper`. \
That's can be useful for custom styling.
* **prop `scrollbarOutside`** \
Allows to render automatically created Scrollbar outside of `.swiper` element (which has `overflow: hidden` by design).
* **props `rootTag` and `rootClass`** \
Because of `navigationOutside`, `paginationOutside` and `scrollbarOutside` all swiper markup should be wrapped with extra node. \
Those props allows to customize tagName and className of this element.
* Slides have the `not-initialized` class before swiper is initialized. \
It allows to style them properly before initialization (during SSR / hydration) to minimize CLS.
## Installation
> Note: You don't need to install Swiper alongside this package -
> it has Swiper as dependency and re-exports all things you need such as modules / stylesheets.
### Using `yarn`
```bash
yarn add @morev/vue-swiper
```
### Using `npm`
```bash
npm install @morev/vue-swiper
```
### Using `pnpm`
```bash
pnpm add @morev/vue-swiper
```
## Usage
```vue
Slide 1
Slide 2
Slide 3
import { Swiper, SwiperSlide, Navigation } from '@morev/vue-swiper';
import '@morev/vue-swiper/dist/swiper-bundle.min.css';
export default {
components: {
Swiper,
SwiperSlide,
},
data: () => ({
modules: [Navigation],
}),
};
```