{"id":13480892,"url":"https://github.com/zefoy/ngx-swiper-wrapper","last_synced_at":"2025-03-27T11:31:04.644Z","repository":{"id":10774694,"uuid":"66935261","full_name":"zefoy/ngx-swiper-wrapper","owner":"zefoy","description":"Angular wrapper library for Swiper","archived":true,"fork":false,"pushed_at":"2022-07-20T12:19:25.000Z","size":6533,"stargazers_count":442,"open_issues_count":77,"forks_count":115,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-03-15T11:02:34.957Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"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/zefoy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-30T11:38:18.000Z","updated_at":"2025-03-13T02:27:28.000Z","dependencies_parsed_at":"2022-08-25T07:41:57.183Z","dependency_job_id":null,"html_url":"https://github.com/zefoy/ngx-swiper-wrapper","commit_stats":null,"previous_names":["zefoy/angular2-swiper-wrapper"],"tags_count":67,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-swiper-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-swiper-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-swiper-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-swiper-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zefoy","download_url":"https://codeload.github.com/zefoy/ngx-swiper-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245591624,"owners_count":20640692,"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":[],"created_at":"2024-07-31T17:00:46.323Z","updated_at":"2025-03-27T11:31:04.222Z","avatar_url":"https://github.com/zefoy.png","language":"TypeScript","funding_links":[],"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","UI Components","Uncategorized"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Carousel","Uncategorized"],"readme":"# Angular Swiper Wrapper\n\n\u003ca href=\"https://badge.fury.io/js/ngx-swiper-wrapper\"\u003e\u003cimg src=\"https://badge.fury.io/js/ngx-swiper-wrapper.svg\" align=\"right\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n\nThis is an Angular wrapper library for the [Swiper](http://idangero.us/swiper/). To use this library you should get familiar with the Swiper documentation as well since this documentation only explains details specific to this wrapper.\n\nThis documentation is for the latest 6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from \u003ca href=\"https://github.com/zefoy/ngx-swiper-wrapper/tree/4.x.x/\"\u003ehere\u003c/a\u003e.\n\n### EOL notice\n\nVersion 10.0.0 will be last release of this library since this is now obsolete due to latest Swiper including direct support for Angular.\n\n### Quick links\n\n[Example application](https://zefoy.github.io/ngx-swiper-wrapper/)\n |\n[StackBlitz example](https://stackblitz.com/github/zefoy/ngx-swiper-wrapper/tree/master)\n |\n[Swiper documentation](http://idangero.us/swiper/api/)\n\n### Building the library\n\n```bash\nnpm install\nnpm run build\n```\n\n### Running the example\n\n```bash\nnpm install\nnpm run start\n```\n\n### Installing and usage\n\n```bash\nnpm install ngx-swiper-wrapper --save\n```\n\n##### Load the module for your app (with global configuration):\n\nProviding the global configuration is optional and when used you should only provide the configuration in your root module.\n\n```javascript\nimport { SwiperModule } from 'ngx-swiper-wrapper';\nimport { SWIPER_CONFIG } from 'ngx-swiper-wrapper';\nimport { SwiperConfigInterface } from 'ngx-swiper-wrapper';\n\nconst DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {\n  direction: 'horizontal',\n  slidesPerView: 'auto'\n};\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    SwiperModule\n  ],\n  providers: [\n    {\n      provide: SWIPER_CONFIG,\n      useValue: DEFAULT_SWIPER_CONFIG\n    }\n  ]\n})\n```\n\n##### Use it in your HTML template (with custom configuration):\n\nThis library provides two ways to create a Swiper element, component for simple use cases and directive for more custom use cases.\n\n**COMPONENT USAGE**\n\nSimply replace the element that would ordinarily be passed to `Swiper` with the swiper component.\n\n**NOTE:** Component provides default elements for the scrollbar, navigation and pagination which you can enable by setting the appropriate configuration to 'true' or by using the default selector. If you want to use custom elements then you might want to use the directive instead.\n\n```html\n\u003cswiper [config]=\"config\" [(index)]=\"index\"\u003e\n  \u003cdiv\u003e\n    Swiper slide content\n  \u003c/div\u003e\n\u003c/swiper\u003e\n```\n\n```javascript\n[config]                // Custom config to override the global defaults.\n\n[index]                 // Can be used to set the active slide index.\n[disabled]              // Disables changing of slides (locks the Swiper).\n\n[useSwiperClass]        // Use 'swiper' class (use provided default styles).\n\n(indexChange)           // Event handler for the Swiper index change event.\n\n(\u003cswiperEvent\u003e)         // All Swiper events / callbacks work as bindings.\n                        // Conflicting events are prefixed with 'swiper':\n                        // click, tap, doubleTap, touch*, transition*\n                        // Example: touchStart -\u003e swiperTouchStart\n```\n\n**DIRECTIVE USAGE**\n\nWhen using only the directive you need to provide your own theming or import the default theme:\n\n```css\n@import '~swiper/swiper-bundle.min.css';\n```\n\nSwiper directive can be used in correctly structured div element with optional custom configuration:\n\n```html\n\u003cdiv  class=\"swiper-container\" [swiper]=\"config\" [(index)]=\"index\"\u003e\n  \u003cdiv class=\"swiper-wrapper\"\u003e\n    \u003cdiv class=\"swiper-slide\"\u003e\n      Swiper slide content\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"swiper-scrollbar\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"swiper-pagination\"\u003e\u003c/div\u003e\n\n  \u003cdiv class=\"swiper-button-prev\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"swiper-button-next\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```javascript\n[swiper]                // Can be used to provide optional custom config.\n\n[index]                 // Can be used to set the active slide index.\n[disabled]              // Disables changing of slides (locks the Swiper).\n[performance]           // Emit all Swiper events outside the Angular zone.\n\n(indexChange)           // Event handler for the Swiper index change event.\n\n(\u003cswiperEvent\u003e)         // All Swiper events / callbacks work as bindings.\n                        // Conflicting events are prefixed with 'swiper':\n                        // click, tap, doubleTap, touch*, transition*\n                        // Example: touchStart -\u003e swiperTouchStart\n```\n\n##### Available configuration options (custom / global configuration):\n\nThis library supports all Swiper configuration options and few extra options for easier usage.\n\n```javascript\nobserver                // Set to to true to enable automatic update calls.\ndirection               // Direction of the Swiper (Default: 'horizontal').\nthreshold               // Distance needed for the swipe action (Default: 0).\nspaceBetween            // Space in pixels between the Swiper items (Default: 0).\nslidesPerView           // Number of the items per view or 'auto' (Default: 1).\ncenteredSlides          // Align active item on center not left (Default: false).\n```\n\nFor more detailed documentation with all the supported events / options see the Swiper documentation.\n\n##### Available control / helper functions (provided by the directive):\n\n```javascript\nswiper()                          // Returns reference to the Swiper instance.\n\ninit()                            // Starts Swiper (when init set to false).\nupdate()                          // Updates Swiper elements / classes / etc.\n\ngetIndex(real?)                   // Returns the active or real slide index.\nsetIndex(index, speed?, silent?)  // Runs transition to slide with given index.\n\nnextSlide(speed?, silent?)        // Runs transition to the next slide index.\nprevSlide(speed?, silent?)        // Runs transition to the previous slide index.\n\nstopAutoplay(reset?)              // Stops and optionally resets the autoplay.\nstartAutoplay(reset?)             // Starts and optionally resets the autoplay.\n```\n\nAbove functions can be accessed through the directive reference (available as directiveRef in the component).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzefoy%2Fngx-swiper-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzefoy%2Fngx-swiper-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzefoy%2Fngx-swiper-wrapper/lists"}