├── .angular-cli.json ├── .editorconfig ├── .gitignore ├── README.md ├── build ├── swiper.module.ts └── swiper │ └── swiper.component.ts ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.e2e.json ├── gulpfile.js ├── karma.conf.js ├── lib ├── swiper.module.d.ts ├── swiper.module.js ├── swiper.module.js.map ├── swiper.module.metadata.json └── swiper │ ├── swiper.component.d.ts │ ├── swiper.component.js │ ├── swiper.component.js.map │ └── swiper.component.metadata.json ├── package-lock.json ├── package.json ├── protractor.conf.js ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── demo │ │ ├── demo.module.ts │ │ └── demo │ │ │ ├── demo.component.css │ │ │ ├── demo.component.html │ │ │ ├── demo.component.spec.ts │ │ │ └── demo.component.ts │ └── swiper │ │ ├── swiper.module.ts │ │ └── swiper │ │ ├── swiper.component.css │ │ ├── swiper.component.html │ │ ├── swiper.component.spec.ts │ │ └── swiper.component.ts ├── assets │ ├── .gitkeep │ └── images │ │ ├── blue.png │ │ ├── green.png │ │ ├── red.png │ │ └── yellow.png ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── typings.d.ts ├── tsconfig.json ├── tsconfig.lib.json └── tslint.json /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "ngx-useful-swiper" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.css", 23 | "../node_modules/swiper/dist/css/swiper.css" 24 | ], 25 | "scripts": [ 26 | "../node_modules/swiper/dist/js/swiper.js" 27 | ], 28 | "environmentSource": "environments/environment.ts", 29 | "environments": { 30 | "dev": "environments/environment.ts", 31 | "prod": "environments/environment.prod.ts" 32 | } 33 | } 34 | ], 35 | "e2e": { 36 | "protractor": { 37 | "config": "./protractor.conf.js" 38 | } 39 | }, 40 | "lint": [ 41 | { 42 | "project": "src/tsconfig.app.json", 43 | "exclude": "**/node_modules/**" 44 | }, 45 | { 46 | "project": "src/tsconfig.spec.json", 47 | "exclude": "**/node_modules/**" 48 | }, 49 | { 50 | "project": "e2e/tsconfig.e2e.json", 51 | "exclude": "**/node_modules/**" 52 | } 53 | ], 54 | "test": { 55 | "karma": { 56 | "config": "./karma.conf.js" 57 | } 58 | }, 59 | "defaults": { 60 | "styleExt": "css", 61 | "component": {} 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## ngx-useful-swiper 2 | 3 | **this is not quite ready yet but feel free to have a look** 4 | 5 | Use iDangero.us's great slider version 4+ [Swiper](http://idangero.us/swiper/#.V9C3w4VOLaI) in Angular. 6 | 7 | Note this package does not yet support Swiper version 4 so be sure to user v3.4.2. 8 | 9 | #### Quick links 10 | [Plunker template](http://plnkr.co/edit/qM4jHG?p=preview), 11 | [Swiper homepage](http://idangero.us/swiper/#.WTiywWiGNhE) 12 | 13 | ### Install 14 | 15 | ```bash 16 | npm install --save ngx-useful-swiper@latest 17 | ``` 18 | 19 | ### Setup 20 | 21 | Add Swiper 4 to your single page 22 | 23 | ```html 24 | 25 | 26 | ``` 27 | 28 | ..or with angular-cli you can add the package 29 | 30 | ```bash 31 | npm install --save swiper@latest 32 | ``` 33 | 34 | then add the js and css to angular-cli.json 35 | 36 | ```json 37 | "styles": [ 38 | "styles.css", 39 | "../node_modules/swiper/dist/css/swiper.css" 40 | ], 41 | "scripts": [ 42 | "../node_modules/swiper/dist/js/swiper.js" 43 | ], 44 | ``` 45 | 46 | #### SystemJS 47 | 48 | In the SystemJs config file (systemjs.config.js) add a mapping for the package 49 | 50 | ```javascript 51 | var map = { 52 | ... 53 | 'ngx-useful-swiper': 'node_modules/ngx-useful-swiper/lib' 54 | }; 55 | ``` 56 | 57 | and add the package to the list of packages. 58 | 59 | ```javascript 60 | var packages = { 61 | ... 62 | 'ngx-useful-swiper': { main: 'swiper.module.js', defaultExtension: 'js' } 63 | }; 64 | ``` 65 | 66 | #### or for angular-cli 67 | 68 | Just install the package and then import the module as below. 69 | 70 | ### How to use it 71 | 72 | Import the **SwiperModule** at the appropiate level in your app. 73 | 74 | For example in **app.module.ts** 75 | 76 | ```javascript 77 | import { NgModule } from '@angular/core'; 78 | import { BrowserModule } from '@angular/platform-browser'; 79 | 80 | import { MatButtonModule, MatCardModule } from '@angular/material'; 81 | 82 | import { SwiperModule } from 'ngx-useful-swiper'; 83 | 84 | import { AppComponent } from './app.component'; 85 | import { DemoComponent } from './demo.component'; 86 | 87 | @NgModule({ 88 | imports: [ 89 | BrowserModule, 90 | MatButtonModule, 91 | MatCardModule 92 | SwiperModule 93 | ], 94 | declarations: [ 95 | AppComponent, 96 | DemoComponent 97 | ], 98 | bootstrap: [AppComponent] 99 | }) 100 | export class AppModule { } 101 | ``` 102 | 103 | Add 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). 104 | Note, 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**. 105 | 106 | ```html 107 | 108 | 109 |
110 |
Slide 1
111 |
Slide 2
112 |
Slide 3
113 |
Slide 4
114 |
Slide 5
115 |
Slide 6
116 |
Slide 7
117 |
Slide 8
118 |
Slide 9
119 |
Slide 10
120 |
121 | 122 |
123 | 124 |
125 |
126 | 127 | 128 | ``` 129 | 130 | Set the config for the swiper in you component and bind it to the component config property as above. 131 | 132 | ```javascript 133 | export class MyComponent implements OnInit { 134 | 135 | config: any = { 136 | pagination: { 137 | el: '.swiper-pagination', 138 | }, 139 | paginationClickable: true, 140 | navigation: { 141 | nextEl: '.swiper-button-next', 142 | prevEl: '.swiper-button-prev', 143 | }, 144 | spaceBetween: 30 145 | }; 146 | 147 | } 148 | ``` 149 | 150 | Set the height and width of the component. It can be targeted by its name ##swiper## 151 | 152 | ```css 153 | swiper{ 154 | height: 300px; 155 | width: 400px; 156 | } 157 | ``` 158 | 159 | The component also checks for the contents of swiper-wrapper being changed and calls update on the swiper when they are. 160 | This allows for dynamic slide lists as you can see from the demo in this repo. 161 | 162 | ```html 163 | 164 |
165 | 166 |
167 |
168 |
169 |
170 | 171 | ``` 172 | 173 | **note for Bootstrap users** 174 | 175 | To ensure the swiper works will with a column layout you may need to set the box-sizing to border-box on the swiper-wrapper. 176 | 177 | ```css 178 | .swiper-wrapper { 179 | box-sizing: border-box; 180 | } 181 | ``` 182 | 183 | #### Manually initializing the Swiper 184 | 185 | By 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. 186 | To 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. 187 | 188 | ```html 189 | 190 | Demo 191 | 192 | 193 |
194 | 195 |
196 |
197 |
198 |
199 | 200 | 201 | 202 | 203 | 204 | 205 | ``` 206 | 207 | #### Accessing the Swiper instance 208 | 209 | When 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). 210 | For example add the template reference **#usefulSwiper** 211 | 212 | ```html 213 | 214 |
215 | 216 |
217 |
218 |
219 |
220 | 221 | ``` 222 | 223 | ..and then you can use the reference to access the **swiper** property. 224 | 225 | ```html 226 | 227 | ``` 228 | 229 | To access the swiper instance and all of it's properties, methods and events use a viewchild to get the component.swiper property. 230 | 231 | ```typescript 232 | @ViewChild('usefulSwiper') usefulSwiper: SwiperComponent; 233 | 234 | ... 235 | 236 | next() { 237 | this.usefulSwiper.swiper.slideNext(); 238 | } 239 | ``` 240 | -------------------------------------------------------------------------------- /build/swiper.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { SwiperComponent } from './swiper/swiper.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule 8 | ], 9 | declarations: [ 10 | SwiperComponent 11 | ], 12 | exports: [ 13 | SwiperComponent 14 | ] 15 | }) 16 | export class SwiperModule { } 17 | 18 | export { SwiperComponent } from './swiper/swiper.component'; 19 | -------------------------------------------------------------------------------- /build/swiper/swiper.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, OnInit, ChangeDetectionStrategy, Input, 3 | ElementRef, ChangeDetectorRef, AfterViewChecked, AfterViewInit, PLATFORM_ID, Inject 4 | } from '@angular/core'; 5 | import { isPlatformBrowser } from '@angular/common'; 6 | 7 | declare var Swiper: any; 8 | 9 | @Component({ 10 | selector: 'swiper', 11 | template: "\n
\n \n
\n ", 12 | styles: ["\n :host {\n display: block;\n }\n\n :host > div {\n width: 100%;\n height: 100%;\n }\n "], 13 | changeDetection: ChangeDetectionStrategy.OnPush 14 | }) 15 | export class SwiperComponent implements AfterViewChecked, AfterViewInit { 16 | @Input() config: any; 17 | @Input('initialize') set initialize(value: boolean) { 18 | this.shouldInitialize = this.initialized ? false : value; 19 | } 20 | 21 | swiper: any; 22 | 23 | private swiperWrapper: any; 24 | private slideCount = 0; 25 | private initialized = false; 26 | private shouldInitialize = true; 27 | 28 | constructor( 29 | private elementRef: ElementRef, 30 | private changeDetectorRef: ChangeDetectorRef, 31 | @Inject(PLATFORM_ID) public platform_id: any 32 | ) { } 33 | 34 | ngAfterViewInit() { 35 | if (this.shouldInitialize) { 36 | this.setup(); 37 | } 38 | } 39 | 40 | setup() { 41 | if (!this.swiper) { 42 | if (isPlatformBrowser(this.platform_id)) { 43 | this.swiperWrapper = this.elementRef.nativeElement.querySelector('.swiper-wrapper'); 44 | this.slideCount = this.swiperWrapper.childElementCount; 45 | this.swiper = new Swiper(this.elementRef.nativeElement.querySelector('swiper > div'), this.config); 46 | this.changeDetectorRef.detectChanges(); 47 | } 48 | 49 | this.shouldInitialize = false; 50 | } 51 | } 52 | 53 | ngAfterViewChecked() { 54 | if (this.shouldInitialize) { 55 | this.setup(); 56 | } 57 | 58 | if (this.swiperWrapper && this.slideCount !== this.swiperWrapper.childElementCount) { 59 | this.slideCount = this.swiperWrapper.childElementCount; 60 | this.swiper.update(); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('ngx-useful-swiper App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const inlineNg2Template = require('gulp-inline-ng2-template'); 3 | 4 | gulp.task('inline-build-templates', () => { 5 | return gulp.src(['./src/app/swiper/**/*.ts', '!./src/app/swiper/**/**.spec.ts']) 6 | .pipe(inlineNg2Template({ 7 | target: 'es5', 8 | useRelativePaths: true 9 | })) 10 | .pipe(gulp.dest('./build')); 11 | 12 | }); 13 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /lib/swiper.module.d.ts: -------------------------------------------------------------------------------- 1 | export declare class SwiperModule { 2 | } 3 | export { SwiperComponent } from './swiper/swiper.component'; 4 | -------------------------------------------------------------------------------- /lib/swiper.module.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var core_1 = require("@angular/core"); 4 | var common_1 = require("@angular/common"); 5 | var swiper_component_1 = require("./swiper/swiper.component"); 6 | var SwiperModule = (function () { 7 | function SwiperModule() { 8 | } 9 | SwiperModule.decorators = [ 10 | { type: core_1.NgModule, args: [{ 11 | imports: [ 12 | common_1.CommonModule 13 | ], 14 | declarations: [ 15 | swiper_component_1.SwiperComponent 16 | ], 17 | exports: [ 18 | swiper_component_1.SwiperComponent 19 | ] 20 | },] }, 21 | ]; 22 | /** @nocollapse */ 23 | SwiperModule.ctorParameters = function () { return []; }; 24 | return SwiperModule; 25 | }()); 26 | exports.SwiperModule = SwiperModule; 27 | var swiper_component_2 = require("./swiper/swiper.component"); 28 | exports.SwiperComponent = swiper_component_2.SwiperComponent; 29 | //# sourceMappingURL=swiper.module.js.map -------------------------------------------------------------------------------- /lib/swiper.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"swiper.module.js","sourceRoot":"","sources":["../build/swiper.module.ts"],"names":[],"mappings":";;AAAA,sCAAyC;AACzC,0CAA+C;AAC/C,8DAA4D;;;;;gBAE3D,eAAQ,SAAC;oBACR,OAAO,EAAE;wBACP,qBAAY;qBACb;oBACD,YAAY,EAAE;wBACZ,kCAAe;qBAChB;oBACD,OAAO,EAAE;wBACP,kCAAe;qBAChB;iBACF;;;;uBAdD;;AAea,oCAAY;AAEzB,8DAA4D;AAAnD,6CAAA,eAAe,CAAA"} -------------------------------------------------------------------------------- /lib/swiper.module.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":4,"metadata":{"SwiperModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":4}],"declarations":[{"__symbolic":"reference","module":"./swiper/swiper.component","name":"SwiperComponent","line":9,"character":4}],"exports":[{"__symbolic":"reference","module":"./swiper/swiper.component","name":"SwiperComponent","line":12,"character":4}]}]}]}},"exports":[{"from":"./swiper/swiper.component","export":["SwiperComponent"]}]}] -------------------------------------------------------------------------------- /lib/swiper/swiper.component.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef, ChangeDetectorRef, AfterViewChecked, AfterViewInit } from '@angular/core'; 2 | export declare class SwiperComponent implements AfterViewChecked, AfterViewInit { 3 | private elementRef; 4 | private changeDetectorRef; 5 | platform_id: any; 6 | config: any; 7 | initialize: boolean; 8 | swiper: any; 9 | private swiperWrapper; 10 | private slideCount; 11 | private initialized; 12 | private shouldInitialize; 13 | constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, platform_id: any); 14 | ngAfterViewInit(): void; 15 | setup(): void; 16 | ngAfterViewChecked(): void; 17 | } 18 | -------------------------------------------------------------------------------- /lib/swiper/swiper.component.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | Object.defineProperty(exports, "__esModule", { value: true }); 3 | var core_1 = require("@angular/core"); 4 | var common_1 = require("@angular/common"); 5 | var SwiperComponent = (function () { 6 | function SwiperComponent(elementRef, changeDetectorRef, platform_id) { 7 | this.elementRef = elementRef; 8 | this.changeDetectorRef = changeDetectorRef; 9 | this.platform_id = platform_id; 10 | this.slideCount = 0; 11 | this.initialized = false; 12 | this.shouldInitialize = true; 13 | } 14 | Object.defineProperty(SwiperComponent.prototype, "initialize", { 15 | set: function (value) { 16 | this.shouldInitialize = this.initialized ? false : value; 17 | }, 18 | enumerable: true, 19 | configurable: true 20 | }); 21 | SwiperComponent.prototype.ngAfterViewInit = function () { 22 | if (this.shouldInitialize) { 23 | this.setup(); 24 | } 25 | }; 26 | SwiperComponent.prototype.setup = function () { 27 | if (!this.swiper) { 28 | if (common_1.isPlatformBrowser(this.platform_id)) { 29 | this.swiperWrapper = this.elementRef.nativeElement.querySelector('.swiper-wrapper'); 30 | this.slideCount = this.swiperWrapper.childElementCount; 31 | this.swiper = new Swiper(this.elementRef.nativeElement.querySelector('swiper > div'), this.config); 32 | this.changeDetectorRef.detectChanges(); 33 | } 34 | this.shouldInitialize = false; 35 | } 36 | }; 37 | SwiperComponent.prototype.ngAfterViewChecked = function () { 38 | if (this.shouldInitialize) { 39 | this.setup(); 40 | } 41 | if (this.swiperWrapper && this.slideCount !== this.swiperWrapper.childElementCount) { 42 | this.slideCount = this.swiperWrapper.childElementCount; 43 | this.swiper.update(); 44 | } 45 | }; 46 | SwiperComponent.decorators = [ 47 | { type: core_1.Component, args: [{ 48 | selector: 'swiper', 49 | template: "\n
\n \n
\n ", 50 | styles: ["\n :host {\n display: block;\n }\n\n :host > div {\n width: 100%;\n height: 100%;\n }\n "], 51 | changeDetection: core_1.ChangeDetectionStrategy.OnPush 52 | },] }, 53 | ]; 54 | /** @nocollapse */ 55 | SwiperComponent.ctorParameters = function () { return [ 56 | { type: core_1.ElementRef, }, 57 | { type: core_1.ChangeDetectorRef, }, 58 | { type: undefined, decorators: [{ type: core_1.Inject, args: [core_1.PLATFORM_ID,] },] }, 59 | ]; }; 60 | SwiperComponent.propDecorators = { 61 | "config": [{ type: core_1.Input },], 62 | "initialize": [{ type: core_1.Input, args: ['initialize',] },], 63 | }; 64 | return SwiperComponent; 65 | }()); 66 | exports.SwiperComponent = SwiperComponent; 67 | //# sourceMappingURL=swiper.component.js.map -------------------------------------------------------------------------------- /lib/swiper/swiper.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"swiper.component.js","sourceRoot":"","sources":["../../build/swiper/swiper.component.ts"],"names":[],"mappings":";;AAAA,sCAGuB;AACvB,0CAAoD;;IAuBlD,yBACU,UAAsB,EACtB,iBAAoC,EAChB;QAFpB,eAAU,GAAV,UAAU,CAAY;QACtB,sBAAiB,GAAjB,iBAAiB,CAAmB;QAChB,gBAAW,GAAX,WAAW;0BAPpB,CAAC;2BACA,KAAK;gCACA,IAAI;KAM1B;0BAfoB,uCAAU;uBAAC,KAAc;YAChD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,KAAK,GAAG,KAAK,CAAC;;;;;IAgB3D,yCAAe,GAAf;QACE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;YAC1B,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF;IAED,+BAAK,GAAL;QACE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;YACjB,EAAE,CAAC,CAAC,0BAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;gBACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;gBACpF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC;gBACvD,IAAI,CAAC,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;gBACnG,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,CAAC;aACxC;YAED,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;SAC/B;KACF;IAED,4CAAkB,GAAlB;QACE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;YAC1B,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;QAED,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;YACnF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC;YACvD,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;SACtB;KACF;;gBArDF,gBAAS,SAAC;oBACT,QAAQ,EAAE,QAAQ;oBAClB,QAAQ,EAAE,gJAAgJ;oBAC1J,MAAM,EAAE,CAAC,4HAA4H,CAAC;oBACtI,eAAe,EAAE,8BAAuB,CAAC,MAAM;iBAChD;;;;gBAXC,iBAAU;gBAAE,wBAAiB;gDA4B1B,aAAM,SAAC,kBAAW;;;2BAfpB,YAAK;+BACL,YAAK,SAAC,YAAY;;0BAhBrB;;AAca,0CAAe"} -------------------------------------------------------------------------------- /lib/swiper/swiper.component.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":4,"metadata":{"SwiperComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"swiper","template":"\n
\n \n
\n ","styles":["\n :host {\n display: block;\n }\n\n :host > div {\n width: 100%;\n height: 100%;\n }\n "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"OnPush"}}]}],"members":{"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"initialize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3},"arguments":["initialize"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":30,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":30,"character":12}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":28,"character":24},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":29,"character":31},{"__symbolic":"reference","name":"any"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"setup":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}]}}}}] -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-useful-swiper", 3 | "description": "Use iDangero.us's Swiper in Angular.", 4 | "version": "0.3.1-beta", 5 | "license": "MIT", 6 | "files": [ 7 | "lib" 8 | ], 9 | "author": "JayChase", 10 | "keywords": [ 11 | "Angular", 12 | "swiper", 13 | "slider", 14 | "carousel" 15 | ], 16 | "private": false, 17 | "main": "./lib/swiper.module.js", 18 | "typings": "./lib/swiper.module.d.ts", 19 | "scripts": { 20 | "ng": "ng", 21 | "start": "ng serve", 22 | "build": "ng build", 23 | "test": "ng test", 24 | "lint": "ng lint", 25 | "e2e": "ng e2e", 26 | "inline-build-templates": "gulp inline-build-templates", 27 | "ngc-build": "ngc -p ./tsconfig.lib.json", 28 | "cleardown": "rimraf build lib", 29 | "prepare": "npm run cleardown && npm run inline-build-templates && npm run ngc-build" 30 | }, 31 | "peerDependencies": { 32 | "@angular/core": ">=5.0.0" 33 | }, 34 | "dependencies": {}, 35 | "devDependencies": { 36 | "@angular/animations": "^5.1.0", 37 | "@angular/cdk": "^5.0.0", 38 | "@angular/common": "^5.0.0", 39 | "@angular/compiler": "^5.0.0", 40 | "@angular/core": "^5.0.0", 41 | "@angular/forms": "^5.0.0", 42 | "@angular/http": "^5.0.0", 43 | "@angular/material": "^5.0.0", 44 | "@angular/platform-browser": "^5.0.0", 45 | "@angular/platform-browser-dynamic": "^5.0.0", 46 | "@angular/router": "^5.0.0", 47 | "core-js": "^2.4.1", 48 | "rxjs": "^5.5.2", 49 | "swiper": "^4.0.7", 50 | "zone.js": "^0.8.14", 51 | "@angular/cli": "1.6.3", 52 | "@angular/compiler-cli": "^5.0.0", 53 | "@angular/language-service": "^5.0.0", 54 | "@types/core-js": "^0.9.43", 55 | "@types/jasmine": "~2.5.53", 56 | "@types/jasminewd2": "~2.0.2", 57 | "@types/node": "~6.0.60", 58 | "codelyzer": "^4.0.1", 59 | "gulp": "^3.9.1", 60 | "gulp-inline-ng2-template": "^4.1.0", 61 | "jasmine-core": "~2.6.2", 62 | "jasmine-spec-reporter": "~4.1.0", 63 | "karma": "~1.7.0", 64 | "karma-chrome-launcher": "~2.1.1", 65 | "karma-cli": "~1.0.1", 66 | "karma-coverage-istanbul-reporter": "^1.2.1", 67 | "karma-jasmine": "~1.1.0", 68 | "karma-jasmine-html-reporter": "^0.2.2", 69 | "protractor": "~5.1.2", 70 | "rimraf": "^2.6.2", 71 | "ts-node": "~3.2.0", 72 | "tslint": "~5.7.0", 73 | "typescript": "~2.4.2" 74 | }, 75 | "repository": { 76 | "type": "git", 77 | "url": "https://github.com/jaychase/ngx-useful-swiper.git" 78 | }, 79 | "bugs": { 80 | "url": "https://github.com/jaychase/ngx-useful-swiper/issues" 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JayChase/ngx-useful-swiper/f365487a2019674c786136619eb35d05f82c8441/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | import { DemoComponent } from './demo/demo/demo.component'; 4 | import { NO_ERRORS_SCHEMA } from '@angular/core'; 5 | 6 | describe('AppComponent', () => { 7 | beforeEach(async(() => { 8 | TestBed.configureTestingModule({ 9 | declarations: [ 10 | AppComponent, 11 | DemoComponent 12 | ], 13 | schemas: [NO_ERRORS_SCHEMA] 14 | }).compileComponents(); 15 | })); 16 | it('should create the app', async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app).toBeTruthy(); 20 | })); 21 | }); 22 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'app'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 3 | import { NgModule } from '@angular/core'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { DemoModule } from './demo/demo.module'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | imports: [ 13 | BrowserModule, 14 | BrowserAnimationsModule, 15 | DemoModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /src/app/demo/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { SwiperModule } from '../swiper/swiper.module'; 4 | import { MatButtonModule, MatCardModule } from '@angular/material'; 5 | 6 | import { DemoComponent } from './demo/demo.component'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | SwiperModule, 12 | MatButtonModule, 13 | MatCardModule 14 | ], 15 | declarations: [DemoComponent], 16 | exports: [DemoComponent] 17 | }) 18 | export class DemoModule { } 19 | -------------------------------------------------------------------------------- /src/app/demo/demo/demo.component.css: -------------------------------------------------------------------------------- 1 | swiper { 2 | width: 300px; 3 | height: 300px; 4 | background: lightgray; 5 | } -------------------------------------------------------------------------------- /src/app/demo/demo/demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | Demo 3 | 4 | 5 |
6 | 7 |
8 |
9 |
10 |
11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/app/demo/demo/demo.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { NO_ERRORS_SCHEMA } from '@angular/core'; 3 | 4 | import { DemoComponent } from './demo.component'; 5 | 6 | describe('DemoComponent', () => { 7 | let component: DemoComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ DemoComponent ], 13 | schemas: [NO_ERRORS_SCHEMA] 14 | }) 15 | .compileComponents(); 16 | })); 17 | 18 | beforeEach(() => { 19 | fixture = TestBed.createComponent(DemoComponent); 20 | component = fixture.componentInstance; 21 | fixture.detectChanges(); 22 | }); 23 | 24 | it('should create', () => { 25 | expect(component).toBeTruthy(); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /src/app/demo/demo/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-demo', 5 | templateUrl: './demo.component.html', 6 | styleUrls: ['./demo.component.css'] 7 | }) 8 | export class DemoComponent implements OnInit { 9 | images: string[]; 10 | config: any = { 11 | pagination: { 12 | el: '.swiper-pagination', 13 | }, 14 | paginationClickable: true, 15 | navigation: { 16 | nextEl: '.swiper-button-next', 17 | prevEl: '.swiper-button-prev', 18 | }, 19 | spaceBetween: 30 20 | }; 21 | 22 | constructor() { } 23 | 24 | ngOnInit() { 25 | } 26 | 27 | loadImages() { 28 | this.images = [ 29 | 'http://localhost:4200/assets/images/yellow.png', 30 | 'http://localhost:4200/assets/images/green.png', 31 | 'http://localhost:4200/assets/images/blue.png' 32 | ]; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/app/swiper/swiper.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { SwiperComponent } from './swiper/swiper.component'; 4 | 5 | @NgModule({ 6 | imports: [ 7 | CommonModule 8 | ], 9 | declarations: [ 10 | SwiperComponent 11 | ], 12 | exports: [ 13 | SwiperComponent 14 | ] 15 | }) 16 | export class SwiperModule { } 17 | 18 | export { SwiperComponent } from './swiper/swiper.component'; 19 | -------------------------------------------------------------------------------- /src/app/swiper/swiper/swiper.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | :host > div { 6 | width: 100%; 7 | height: 100%; 8 | } -------------------------------------------------------------------------------- /src/app/swiper/swiper/swiper.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /src/app/swiper/swiper/swiper.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { Component, ElementRef } from '@angular/core'; 2 | import { 3 | async, 4 | inject, 5 | TestBed, 6 | ComponentFixture 7 | } from '@angular/core/testing'; 8 | 9 | import { SwiperComponent } from './swiper.component'; 10 | 11 | @Component({ 12 | template: `
13 | 14 |
15 | 16 |
17 | 18 |
`, 19 | }) 20 | class BasicHostComponent { 21 | images: string[]; 22 | config: Object = { 23 | pagination: '.swiper-pagination', 24 | paginationClickable: true, 25 | nextButton: '.swiper-button-next', 26 | prevButton: '.swiper-button-prev', 27 | spaceBetween: 30 28 | }; 29 | 30 | getImages() { 31 | this.images = [ 32 | 'http://localhost:3000/public/images/yellow.png', 33 | 'http://localhost:3000/public/images/green.png', 34 | 'http://localhost:3000/public/images/blue.png', 35 | 'http://localhost:3000/public/images/red.png' 36 | ]; 37 | } 38 | } 39 | 40 | @Component({ 41 | template: `
42 | 43 |
44 | 45 |
46 | 47 |
` 48 | }) 49 | class ManualHostComponent { 50 | images: string[]; 51 | config: Object = { 52 | pagination: '.swiper-pagination', 53 | paginationClickable: true, 54 | nextButton: '.swiper-button-next', 55 | prevButton: '.swiper-button-prev', 56 | spaceBetween: 30 57 | }; 58 | 59 | initSwiper: boolean; 60 | 61 | getImages() { 62 | this.images = [ 63 | 'http://localhost:3000/public/images/yellow.png', 64 | 'http://localhost:3000/public/images/green.png', 65 | 'http://localhost:3000/public/images/blue.png', 66 | 'http://localhost:3000/public/images/red.png' 67 | ]; 68 | } 69 | } 70 | 71 | describe('SwiperComponent', () => { 72 | let mockSwiper: any; 73 | 74 | beforeEach(() => { 75 | (window).Swiper = (element: any, options: any) => { 76 | mockSwiper = { 77 | element: element, 78 | options: options, 79 | update() { 80 | 81 | } 82 | }; 83 | 84 | spyOn(mockSwiper, 'update'); 85 | 86 | return mockSwiper; 87 | }; 88 | 89 | spyOn((window), 'Swiper').and.callThrough(); 90 | 91 | TestBed.configureTestingModule({ 92 | declarations: [ 93 | BasicHostComponent, 94 | ManualHostComponent, 95 | SwiperComponent 96 | ] 97 | }); 98 | }); 99 | 100 | it('should build without error', async(() => { 101 | TestBed.compileComponents().then(() => { 102 | const fixture = TestBed.createComponent(BasicHostComponent); 103 | 104 | fixture.detectChanges(); 105 | const compiled = fixture.debugElement.nativeElement; 106 | 107 | expect(compiled).not.toBeNull(); 108 | }); 109 | })); 110 | 111 | it('should create a new swiper instance with the swiper-wrapper element as the first parameter if initialize is not set', async(() => { 112 | TestBed.compileComponents().then(() => { 113 | const fixture = TestBed.createComponent(BasicHostComponent); 114 | 115 | fixture.detectChanges(); 116 | 117 | expect((window).Swiper).toHaveBeenCalledWith(fixture.elementRef.nativeElement.querySelector('.swiper-container'), jasmine.anything()); 118 | }); 119 | })); 120 | 121 | it('should NOT create a new swiper instance with the swiper-wrapper element as the first parameter if initialize is not defined', async(() => { 122 | TestBed.compileComponents().then(() => { 123 | const fixture = TestBed.createComponent(ManualHostComponent); 124 | 125 | fixture.detectChanges(); 126 | 127 | expect((window).Swiper).not.toHaveBeenCalledWith(fixture.elementRef.nativeElement.querySelector('.swiper-container'), jasmine.anything()); 128 | }); 129 | })); 130 | 131 | it('should NOT create a new swiper instance with the swiper-wrapper element as the first parameter if initialize is false', async(() => { 132 | TestBed.compileComponents().then(() => { 133 | const fixture = TestBed.createComponent(ManualHostComponent); 134 | fixture.componentInstance.initSwiper = false; 135 | 136 | fixture.detectChanges(); 137 | 138 | expect((window).Swiper).not.toHaveBeenCalledWith(fixture.elementRef.nativeElement.querySelector('.swiper-container'), jasmine.anything()); 139 | }); 140 | })); 141 | 142 | it('should create a new swiper instance with the swiper-wrapper element as the first parameter when initialize is true', async(() => { 143 | TestBed.compileComponents().then(() => { 144 | const fixture = TestBed.createComponent(ManualHostComponent); 145 | fixture.componentInstance.initSwiper = true; 146 | 147 | fixture.detectChanges(); 148 | 149 | expect((window).Swiper).toHaveBeenCalledWith(fixture.elementRef.nativeElement.querySelector('.swiper-container'), jasmine.anything()); 150 | }); 151 | })); 152 | 153 | it('should create a new swiper instance with the swiper-wrapper element as the first parameter when initialize changed to true', async(() => { 154 | TestBed.compileComponents().then(() => { 155 | const fixture = TestBed.createComponent(ManualHostComponent); 156 | fixture.componentInstance.initSwiper = false; 157 | fixture.detectChanges(); 158 | 159 | fixture.componentInstance.initSwiper = true; 160 | fixture.detectChanges(); 161 | 162 | expect((window).Swiper).toHaveBeenCalledWith(fixture.elementRef.nativeElement.querySelector('.swiper-container'), jasmine.anything()); 163 | }); 164 | })); 165 | 166 | it('should not create a new swiper instance if the Swiper has already been initialized', async(() => { 167 | TestBed.compileComponents().then(() => { 168 | const fixture = TestBed.createComponent(ManualHostComponent); 169 | fixture.componentInstance.initSwiper = false; 170 | fixture.detectChanges(); 171 | 172 | fixture.componentInstance.initSwiper = true; 173 | fixture.detectChanges(); 174 | 175 | fixture.componentInstance.initSwiper = true; 176 | fixture.detectChanges(); 177 | 178 | expect((window).Swiper.calls.count()).toEqual(1); 179 | }); 180 | })); 181 | 182 | it('should create a new swiper instance with the BasicHostComponent.config as the first parameter', async(() => { 183 | TestBed.compileComponents().then(() => { 184 | const fixture = TestBed.createComponent(BasicHostComponent); 185 | 186 | fixture.detectChanges(); 187 | 188 | expect((window).Swiper).toHaveBeenCalledWith(jasmine.anything(), fixture.componentInstance.config); 189 | }); 190 | })); 191 | 192 | it('should NOT call Swiper.update if the swiper-wrapper content has not been changed', async(() => { 193 | TestBed.compileComponents().then(() => { 194 | const fixture = TestBed.createComponent(BasicHostComponent); 195 | 196 | fixture.detectChanges(); 197 | 198 | expect(mockSwiper.update).not.toHaveBeenCalled(); 199 | }); 200 | })); 201 | 202 | it('should call Swiper.update if the swiper-wrapper content has been changed', async(() => { 203 | TestBed.compileComponents().then(() => { 204 | const fixture = TestBed.createComponent(BasicHostComponent); 205 | 206 | fixture.detectChanges(); 207 | 208 | fixture.componentInstance.getImages(); 209 | 210 | fixture.detectChanges(); 211 | 212 | expect(mockSwiper.update).toHaveBeenCalled(); 213 | }); 214 | })); 215 | }); 216 | -------------------------------------------------------------------------------- /src/app/swiper/swiper/swiper.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, OnInit, ChangeDetectionStrategy, Input, 3 | ElementRef, ChangeDetectorRef, AfterViewChecked, AfterViewInit, PLATFORM_ID, Inject 4 | } from '@angular/core'; 5 | import { isPlatformBrowser } from '@angular/common'; 6 | 7 | declare var Swiper: any; 8 | 9 | @Component({ 10 | selector: 'swiper', 11 | templateUrl: './swiper.component.html', 12 | styleUrls: ['./swiper.component.css'], 13 | changeDetection: ChangeDetectionStrategy.OnPush 14 | }) 15 | export class SwiperComponent implements AfterViewChecked, AfterViewInit { 16 | @Input() config: any; 17 | @Input('initialize') set initialize(value: boolean) { 18 | this.shouldInitialize = this.initialized ? false : value; 19 | } 20 | 21 | swiper: any; 22 | 23 | private swiperWrapper: any; 24 | private slideCount = 0; 25 | private initialized = false; 26 | private shouldInitialize = true; 27 | 28 | constructor( 29 | private elementRef: ElementRef, 30 | private changeDetectorRef: ChangeDetectorRef, 31 | @Inject(PLATFORM_ID) public platform_id: any 32 | ) { } 33 | 34 | ngAfterViewInit() { 35 | if (this.shouldInitialize) { 36 | this.setup(); 37 | } 38 | } 39 | 40 | setup() { 41 | if (!this.swiper) { 42 | if (isPlatformBrowser(this.platform_id)) { 43 | this.swiperWrapper = this.elementRef.nativeElement.querySelector('.swiper-wrapper'); 44 | this.slideCount = this.swiperWrapper.childElementCount; 45 | this.swiper = new Swiper(this.elementRef.nativeElement.querySelector('swiper > div'), this.config); 46 | this.changeDetectorRef.detectChanges(); 47 | } 48 | 49 | this.shouldInitialize = false; 50 | } 51 | } 52 | 53 | ngAfterViewChecked() { 54 | if (this.shouldInitialize) { 55 | this.setup(); 56 | } 57 | 58 | if (this.swiperWrapper && this.slideCount !== this.swiperWrapper.childElementCount) { 59 | this.slideCount = this.swiperWrapper.childElementCount; 60 | this.swiper.update(); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JayChase/ngx-useful-swiper/f365487a2019674c786136619eb35d05f82c8441/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/images/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JayChase/ngx-useful-swiper/f365487a2019674c786136619eb35d05f82c8441/src/assets/images/blue.png -------------------------------------------------------------------------------- /src/assets/images/green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JayChase/ngx-useful-swiper/f365487a2019674c786136619eb35d05f82c8441/src/assets/images/green.png -------------------------------------------------------------------------------- /src/assets/images/red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JayChase/ngx-useful-swiper/f365487a2019674c786136619eb35d05f82c8441/src/assets/images/red.png -------------------------------------------------------------------------------- /src/assets/images/yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JayChase/ngx-useful-swiper/f365487a2019674c786136619eb35d05f82c8441/src/assets/images/yellow.png -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JayChase/ngx-useful-swiper/f365487a2019674c786136619eb35d05f82c8441/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgxUsefulSwiper 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by default for Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import "~@angular/material/prebuilt-themes/indigo-pink.css"; -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare const __karma__: any; 17 | declare const require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [ 8 | ] 9 | }, 10 | "exclude": [ 11 | "test.ts", 12 | "**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts" 15 | ], 16 | "include": [ 17 | "**/*.spec.ts", 18 | "**/*.d.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": true, 11 | "declaration": true, 12 | "outDir": "./lib", 13 | "stripInternal": true, 14 | "lib": [ 15 | "es6", 16 | "dom" 17 | ] 18 | }, 19 | "include": [ 20 | "./build/**/*" 21 | ], 22 | "files": [ 23 | "./node_modules/@types/core-js/index.d.ts" 24 | ], 25 | "angularCompilerOptions": { 26 | "skipTemplateCodegen": true 27 | } 28 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "deprecation": { 15 | "severity": "warn" 16 | }, 17 | "eofline": true, 18 | "forin": true, 19 | "import-blacklist": [ 20 | true, 21 | "rxjs", 22 | "rxjs/Rx" 23 | ], 24 | "import-spacing": true, 25 | "indent": [ 26 | true, 27 | "spaces" 28 | ], 29 | "interface-over-type-literal": true, 30 | "label-position": true, 31 | "max-line-length": [ 32 | true, 33 | 240 34 | ], 35 | "member-access": false, 36 | "member-ordering": [ 37 | true, 38 | { 39 | "order": [ 40 | "static-field", 41 | "instance-field", 42 | "static-method", 43 | "instance-method" 44 | ] 45 | } 46 | ], 47 | "no-arg": true, 48 | "no-bitwise": true, 49 | "no-console": [ 50 | true, 51 | "debug", 52 | "info", 53 | "time", 54 | "timeEnd", 55 | "trace" 56 | ], 57 | "no-construct": true, 58 | "no-debugger": true, 59 | "no-duplicate-super": true, 60 | "no-empty": false, 61 | "no-empty-interface": true, 62 | "no-eval": true, 63 | "no-inferrable-types": [ 64 | true, 65 | "ignore-params" 66 | ], 67 | "no-misused-new": true, 68 | "no-non-null-assertion": true, 69 | "no-shadowed-variable": true, 70 | "no-string-literal": false, 71 | "no-string-throw": true, 72 | "no-switch-case-fall-through": true, 73 | "no-trailing-whitespace": true, 74 | "no-unnecessary-initializer": true, 75 | "no-unused-expression": true, 76 | "no-use-before-declare": true, 77 | "no-var-keyword": true, 78 | "object-literal-sort-keys": false, 79 | "one-line": [ 80 | true, 81 | "check-open-brace", 82 | "check-catch", 83 | "check-else", 84 | "check-whitespace" 85 | ], 86 | "prefer-const": true, 87 | "quotemark": [ 88 | true, 89 | "single" 90 | ], 91 | "radix": true, 92 | "semicolon": [ 93 | true, 94 | "always" 95 | ], 96 | "triple-equals": [ 97 | true, 98 | "allow-null-check" 99 | ], 100 | "typedef-whitespace": [ 101 | true, 102 | { 103 | "call-signature": "nospace", 104 | "index-signature": "nospace", 105 | "parameter": "nospace", 106 | "property-declaration": "nospace", 107 | "variable-declaration": "nospace" 108 | } 109 | ], 110 | "typeof-compare": true, 111 | "unified-signatures": true, 112 | "variable-name": false, 113 | "whitespace": [ 114 | true, 115 | "check-branch", 116 | "check-decl", 117 | "check-operator", 118 | "check-separator", 119 | "check-type" 120 | ], 121 | "directive-selector": [ 122 | true, 123 | "attribute", 124 | "app", 125 | "camelCase" 126 | ], 127 | "component-selector": [ 128 | true, 129 | "element", 130 | "app", 131 | "kebab-case" 132 | ], 133 | "no-output-on-prefix": true, 134 | "use-input-property-decorator": true, 135 | "use-output-property-decorator": true, 136 | "use-host-property-decorator": true, 137 | "no-input-rename": true, 138 | "no-output-rename": true, 139 | "use-life-cycle-interface": true, 140 | "use-pipe-transform-interface": true, 141 | "component-class-suffix": true, 142 | "directive-class-suffix": true 143 | } 144 | } 145 | --------------------------------------------------------------------------------