https://github.com/grohden/ionicswiper
A angular wrapper for swiper focused on ionic v1 as a 'swipe' lib (not slide)
https://github.com/grohden/ionicswiper
angularjs ionic npm-package swipe swiper
Last synced: 6 months ago
JSON representation
A angular wrapper for swiper focused on ionic v1 as a 'swipe' lib (not slide)
- Host: GitHub
- URL: https://github.com/grohden/ionicswiper
- Owner: Grohden
- License: mit
- Created: 2017-11-09T20:03:38.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T17:09:36.000Z (about 3 years ago)
- Last Synced: 2025-06-27T23:01:47.047Z (6 months ago)
- Topics: angularjs, ionic, npm-package, swipe, swiper
- Language: JavaScript
- Homepage:
- Size: 1.99 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ionic v1 Swiper
If you're looking for an angular wrapper for swiper you can find it [here](https://github.com/ksachdeva/angular-swiper).
My version of angular swiper is focused on **ionic v1**, since ionic v1 lists doesn't support swipes for both sides i wrote this
'simple' wrappers for Swiper (which seems to be the one used in ionic 2)
to support this.
## Install
`npm install ionic-swiper`
## Demo
An demo is available [here](https://codepen.io/Grohden/full/EbjWBe/) and on the demo folder.
## API Documentation
API Documentation is available [here](https://grohden.github.io/ionicSwiper/)
## Usage
You just need to import the `swiper.bundle.js` in the HTML like this:
```html
angular.module('yourModule',['ionic.swiper']);
```
Or if you use **webpack** you can use like this:
```javascript
import {moduleName as ionicSwiperModule} from 'ionic-swiper';
angular.module('yourModule',[ionicSwiperModule]);
//and import the .css your module generates in your html.
```
**You can import the module like that, but you'll need to use these two in your webpack:**
* babel-plugin-angularjs-annotate
* extract-text-webpack-plugin
### Usage example
Below is the latest way to use this lib:
```html
Left
Central {{:: containerId}}
Right
```
Below is a simple usage on html **with the old way** i wrote this:
```html
This swiper container id is {{:: containerId }}
Left Button
Right Button
```
Note: Most of the swiper management is done by using an id, this id is exposed by `swiperContainer` directive as `containerId` as shown in the example.
#### Default configurations
You can **override** the default configurations for swiper with
`SwiperConfigurationsProvider` on the config phase
like the shown on below:
```javascript
config.$inject = ['SwiperConfigurationsProvider'];
function config(SwiperConfigurationsProvider) {
'use strict';
SwiperConfigurationsProvider.useAsDefaultConfigs({
resistanceRatio: 0.3
})
}
```
## Issues
My implementation seems to not work properly with ionic's `collection-repeat`,
it works partially, but for some items swiper seems to get a 'free swipe mode'.
There are some problems with ionic list scroll **on browser mode**, it seems that swiper take the 'drag'/scroll event to itself.
## Development
`npm install` should setup everything to dev env.
then you can run `npm start` and `npm run watch` and start the development
To make the dist build, you should run `npm build`, if every test pass,
then you can use the dist bundle.
## Notes
* I'm not spending too much time in this lib, so, if you find a bug or have a suggestion, you can fork, open an issue or send a PR to me :D
* I did'nt wrote directives with templates to give a better control over html structure, so you need the
*swiper-container*, *swiper-wrapper* and *swiper-slides* classes and nodes.
* I'm using **Ramda** to get a better functional approach.
* **Swiper is a SLIDE lib**, so there are some limitations in this lib..