{"id":13535445,"url":"https://github.com/JayChase/angular2-useful-swiper","last_synced_at":"2025-04-02T01:30:55.062Z","repository":{"id":22892090,"uuid":"67661331","full_name":"JayChase/angular2-useful-swiper","owner":"JayChase","description":"Use iDangero.us' great slider, Swiper in Angular 2.","archived":false,"fork":false,"pushed_at":"2023-05-18T09:20:53.000Z","size":5013,"stargazers_count":102,"open_issues_count":54,"forks_count":33,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-30T22:11:14.309Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/JayChase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2016-09-08T02:33:27.000Z","updated_at":"2025-01-20T19:43:55.000Z","dependencies_parsed_at":"2024-01-16T15:49:44.817Z","dependency_job_id":null,"html_url":"https://github.com/JayChase/angular2-useful-swiper","commit_stats":{"total_commits":38,"total_committers":4,"mean_commits":9.5,"dds":0.5789473684210527,"last_synced_commit":"2a21fb9f4d3d035ca6012e4c9e486d977bca6559"},"previous_names":["useful-software-solutions-ltd/angular2-useful-swiper"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fangular2-useful-swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fangular2-useful-swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fangular2-useful-swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayChase%2Fangular2-useful-swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JayChase","download_url":"https://codeload.github.com/JayChase/angular2-useful-swiper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246385415,"owners_count":20768672,"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-08-01T08:00:56.418Z","updated_at":"2025-04-02T01:30:54.745Z","avatar_url":"https://github.com/JayChase.png","language":"TypeScript","readme":"## ngx-useful-swiper\n\nUse iDangero.us's great slider [Swiper](http://idangero.us/swiper/#.V9C3w4VOLaI) in Angular.\n\n#### Quick links\n\n- [Demo (StackBlitz)](https://stackblitz.com/edit/ngx-useful-swiper)\n- [Swiper homepage](http://idangero.us/swiper/#.WTiywWiGNhE)\n\n### Install\n\n```bash\nnpm install --save ngx-useful-swiper@latest swiper\n```\n\nAdd the swiper styles to the app styles in **angular.json**.\n\n```json\n{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"demo\": {\n      ...\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:browser\",\n          \"options\": {\n            ...\n            \"styles\": [\n              \"./node_modules/swiper/swiper-bundle.css\",\n            ],\n            ...\n```\n\n### Usage\n\nIn **app.module.ts** (or in whichever child module you are using the component) import the **NgxUsefulSwiperModule** module.\n\n```typescript\nimport { NgxUsefulSwiperModule } from 'ngx-useful-swiper';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, NgxUsefulSwiperModule],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nAdd the swiper component to your component to create a slider and add the content as you normally would to set up a slider (see the official [demos](http://idangero.us/swiper/demos/#.V9C73YVOLaI) for more information).\nNote, you don't need to include the **swiper-container** div just the content, but the slides should be contained in a **swiper-wrapper** div and have the class **swiper-slide**.\n\n```html\n\u003cmy-component\u003e\n  \u003cswiper [config]=\"config\"\u003e\n    \u003cdiv class=\"swiper-wrapper\"\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 1\u003c/div\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 2\u003c/div\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 3\u003c/div\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 4\u003c/div\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 5\u003c/div\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 6\u003c/div\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 7\u003c/div\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 8\u003c/div\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 9\u003c/div\u003e\n      \u003cdiv class=\"swiper-slide\"\u003eSlide 10\u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- Add Pagination --\u003e\n    \u003cdiv class=\"swiper-pagination\"\u003e\u003c/div\u003e\n    \u003c!-- Add Arrows --\u003e\n    \u003cdiv class=\"swiper-button-next\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"swiper-button-prev\"\u003e\u003c/div\u003e\n  \u003c/swiper\u003e\n\u003c/my-component\u003e\n```\n\nSet the config for the swiper in you component and bind it to the component config property as above.\n\n```javascript\nimport { SwiperOptions } from 'swiper';\n\n\nexport class MyComponent implements OnInit {\nconfig: SwiperOptions = {\n    pagination: { el: '.swiper-pagination', clickable: true },\n    navigation: {\n      nextEl: '.swiper-button-next',\n      prevEl: '.swiper-button-prev'\n    },\n    spaceBetween: 30\n  };\n```\n\nSet the height and width of the component.\n\n```css\nswiper {\n  height: 300px;\n  width: 400px;\n}\n```\n\nThe component also checks for the contents of swiper-wrapper being changed and calls update on the swiper when they are.\nThis allows for dynamic slide lists as you can see from the demo in this repo.\n\n```html\n\u003cswiper [config]=\"config\"\u003e\n  \u003cdiv class=\"swiper-wrapper\"\u003e\n    \u003cimg class=\"swiper-slide\" *ngFor=\"let image of images\" [src]=\"image\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"swiper-pagination\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"swiper-button-next\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"swiper-button-prev\"\u003e\u003c/div\u003e\n\u003c/swiper\u003e\n```\n\n**note for Bootstrap users**\n\nTo ensure the swiper works will with a column layout you may need to set the box-sizing to border-box on the swiper-wrapper.\n\n```css\n.swiper-wrapper {\n  box-sizing: border-box;\n}\n```\n\n#### Manually initializing the Swiper\n\nBy default the Swiper will be created in the **AfterViewChecked** event of the component. If the swiper is not going to have been rendered at this time (if it is on a hidden tab for example), it is best to handle the initialization manually.\nTo do this use the component's **initialize** property and only set it's value to true when ready. This will then initialize the Swiper the next time the next AfterViewChecked event is fired to ensure the DOM is ready.\n\n```html\n\u003cmat-tabs mat-ripple mat-tab-active-index=\"0\"\u003e\n  \u003cmat-tab-panel mat-tab-panel-title=\"Tab1\"\u003e \u003c/mat-tab-panel\u003e\n  \u003cmat-tab-panel mat-tab-panel-title=\"Tab2\" #panel\u003e\n    \u003cswiper [config]=\"config\" class=\"wrap1\" [initialize]=\"panel.isActive\"\u003e\n      \u003cdiv class=\"swiper-wrapper wrap1\"\u003e\n        \u003cimg\n          class=\"swiper-slide\"\n          *ngFor=\"let image of trigger.images\"\n          [src]=\"image\"\n        /\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"swiper-pagination\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"swiper-button-next\"\u003e\u003c/div\u003e\n      \u003cdiv class=\"swiper-button-prev\"\u003e\u003c/div\u003e\n    \u003c/swiper\u003e\n  \u003c/mat-tab-panel\u003e\n\u003c/mat-tabs\u003e\n```\n\n#### Accessing the Swiper instance\n\nWhen a new instance of Swiper is created it is set as a property on the component. You can then access this by using a [template reference](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars).\nFor example add the template reference **#usefulSwiper**\n\n```html\n\u003cswiper [config]=\"config\" #usefulSwiper\u003e\n  \u003cdiv class=\"swiper-wrapper\"\u003e\n    \u003cimg class=\"swiper-slide\" *ngFor=\"let image of images\" [src]=\"image\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"swiper-pagination\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"swiper-button-next\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"swiper-button-prev\"\u003e\u003c/div\u003e\n\u003c/swiper\u003e\n```\n\n..and then you can use the reference to access the **swiper** property.\n\n```html\n\u003cbutton (click)=\"usefulSwiper.swiper.createLoop()\"\u003eloop\u003c/button\u003e\n```\n\nTo access the swiper instance and all of it's properties, methods and events use a viewchild to get the component.swiper property.\n\n```typescript\n @ViewChild('usefulSwiper',{static: false S}) usefulSwiper: SwiperComponent;\n\n ...\n\n  next() {\n    this.usefulSwiper.swiper.slideNext();\n  }\n```\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJayChase%2Fangular2-useful-swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJayChase%2Fangular2-useful-swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJayChase%2Fangular2-useful-swiper/lists"}