{"id":29085403,"url":"https://github.com/grohden/ionicswiper","last_synced_at":"2025-06-27T23:02:13.140Z","repository":{"id":43449416,"uuid":"110160536","full_name":"Grohden/ionicSwiper","owner":"Grohden","description":"A angular wrapper for swiper focused on ionic v1 as a 'swipe' lib (not slide)","archived":false,"fork":false,"pushed_at":"2022-12-06T17:09:36.000Z","size":2085,"stargazers_count":2,"open_issues_count":7,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-27T23:01:47.047Z","etag":null,"topics":["angularjs","ionic","npm-package","swipe","swiper"],"latest_commit_sha":null,"homepage":"","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/Grohden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-09T20:03:38.000Z","updated_at":"2020-09-01T05:30:48.000Z","dependencies_parsed_at":"2023-01-24T08:31:42.010Z","dependency_job_id":null,"html_url":"https://github.com/Grohden/ionicSwiper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Grohden/ionicSwiper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohden%2FionicSwiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohden%2FionicSwiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohden%2FionicSwiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohden%2FionicSwiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Grohden","download_url":"https://codeload.github.com/Grohden/ionicSwiper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grohden%2FionicSwiper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262347438,"owners_count":23296891,"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":["angularjs","ionic","npm-package","swipe","swiper"],"created_at":"2025-06-27T23:01:20.945Z","updated_at":"2025-06-27T23:02:13.113Z","avatar_url":"https://github.com/Grohden.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic v1 Swiper\n\nIf you're looking for an angular wrapper for swiper you can find it [here](https://github.com/ksachdeva/angular-swiper).\n\nMy version of angular swiper is focused on **ionic v1**, since ionic v1 lists doesn't support swipes for both sides i wrote this\n'simple' wrappers for Swiper (which seems to be the one used in ionic 2)\nto support this.\n\n## Install\n\n`npm install ionic-swiper`\n\n## Demo\n\nAn demo is available [here](https://codepen.io/Grohden/full/EbjWBe/) and on the demo folder.\n\n## API Documentation\n\nAPI Documentation is available [here](https://grohden.github.io/ionicSwiper/)\n\n## Usage\n\nYou just need to import the `swiper.bundle.js` in  the HTML like this:\n\n```html\n\u003clink type=\"text/css\" href=\"swiper.css\"/\u003e\n\u003cscript type=\"text/javascript\" src=\"swiper.bundle.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    angular.module('yourModule',['ionic.swiper']);\n\u003c/script\u003e\n```\n\nOr if you use **webpack** you can use like this:\n\n```javascript\nimport {moduleName as ionicSwiperModule} from 'ionic-swiper';\n\nangular.module('yourModule',[ionicSwiperModule]);\n\n//and import the .css your module generates in your html.\n```\n\n**You can import the module like that, but you'll need to use these two in your webpack:**\n\n* babel-plugin-angularjs-annotate\n* extract-text-webpack-plugin\n\n### Usage example\n\nBelow is the latest way to use this lib:\n\n```html\n\u003cionic-swiper ng-repeat=\"i in [1,2,3]\"\n              center-on-disable=\"{{ true || 'disable default center on disable behavior'}}\"\n              is-swipable=\"{{ true || 'some prop to watch' }}\"\n              left-swiper=\"{{:: true || 'or any prop that evaluate to a boolean' }}\"\n              right-swiper=\"{{:: true || 'or any prop that evaluate to a boolean' }}\"\u003e\n    \u003c!-- containerId is available inside this context --\u003e\n            \n    \u003c!-- Left transclude is optional --\u003e\n    \u003cleft-swiper class=\"side-item\"\u003e\n        Left\n    \u003c/left-swiper\u003e\n    \n    \u003c!-- Central transclude is required --\u003e\n    \u003ccentral-swiper class=\"central-item\"\u003e\n       Central {{:: containerId}}\n    \u003c/central-swiper\u003e\n    \n    \u003c!-- Right transclude is optional --\u003e\n    \u003cright-swiper class=\"side-item\"\u003e\n        Right\n    \u003c/right-swiper\u003e\n\u003c/ionic-swiper\u003e\n```\n\nBelow is a simple usage on html **with the old way** i wrote this:\n\n```html\n\u003cdiv\n    swiper-container=\"{{ true }}\"\n    class=\"swiper-container\" \n    ng-repeat=\"item in ctrl.items\"\u003e\n  \u003c!-- containerId is available inside this context --\u003e\n\n  \u003cdiv class=\"swiper-wrapper\"\u003e\n            \u003cion-item class=\"swiper-slide\" swiper-slide=\"center\"\u003e\n              This swiper container id is {{:: containerId }}\n            \u003c/ion-item\u003e\n\n            \u003c!--By the way, the html nodes order matters! --\u003e\n            \u003cion-item class=\"swiper-slide\" swiper-slide=\"left\"\u003e\n                Left Button\n            \u003c/ion-item\u003e\n\n            \u003cion-item class=\"swiper-slide\" swiper-slide=\"right\"\u003e\n                Right Button\n            \u003c/ion-item\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nNote: 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.\n\n#### Default configurations \n\nYou can **override** the default configurations for swiper with\n\n`SwiperConfigurationsProvider` on the config phase\nlike the shown on below:\n\n```javascript\nconfig.$inject = ['SwiperConfigurationsProvider'];\nfunction config(SwiperConfigurationsProvider) {\n    'use strict';\n    SwiperConfigurationsProvider.useAsDefaultConfigs({\n        resistanceRatio: 0.3\n    })\n}\n```\n\n## Issues\n\nMy implementation seems to not work properly with ionic's `collection-repeat`,\nit works partially, but for some items swiper seems to get a 'free swipe mode'.\n\nThere are some problems with ionic list scroll **on browser mode**, it seems that swiper take the 'drag'/scroll event to itself.\n\n## Development\n\n`npm install` should setup everything to dev env.\nthen you can run `npm start` and `npm run watch` and start the development\n\nTo make the dist build, you should run `npm build`, if every test pass,\nthen you can use the dist bundle.\n\n## Notes\n\n* 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\n\n* I did'nt wrote directives with templates to give a better control over html structure, so you need the\n*swiper-container*, *swiper-wrapper* and *swiper-slides* classes and nodes.\n\n* I'm using **Ramda** to get a better functional approach.\n\n* **Swiper is a SLIDE lib**, so there are some limitations in this lib..\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrohden%2Fionicswiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrohden%2Fionicswiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrohden%2Fionicswiper/lists"}