├── .browserslistrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── projects └── angular-responsive-carousel │ ├── README.md │ ├── karma.conf.js │ ├── ng-package.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── carousel.component.html │ │ ├── carousel.component.sass │ │ ├── carousel.component.ts │ │ ├── carousel.module.ts │ │ ├── carousel.ts │ │ ├── cells.ts │ │ ├── container.ts │ │ ├── interfaces.ts │ │ ├── slide.ts │ │ ├── theming.sass │ │ ├── touches.ts │ │ ├── utils.ts │ │ └── variables.sass │ ├── public-api.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.sass │ ├── app.component.spec.ts │ ├── app.component.ts │ └── app.module.ts ├── assets │ ├── .gitkeep │ ├── photo-1443996104801-80c82e789b18.jfif │ ├── photo-1444065707204-12decac917e8.jfif │ ├── photo-1445452916036-9022dfd33aa8.jfif │ ├── photo-1487819162750-4a48cfbf83b0.jpg │ ├── photo-1489365091240-6a18fc761ec2.jpg │ ├── photo-1494391727071-33d8df6f13cf.jpg │ ├── photo-1494806812796-244fe51b774d.jpg │ ├── photo-1495563381401-ecfbcaaa60f2.jpg │ ├── photo-1498116535454-8877d66c3b83.jpg │ ├── photo-1498116623708-de7137f0d4be.jpg │ ├── photo-1505839673365-e3971f8d9184.jfif │ ├── photo-1506086679524-493c64fdfaa6.jpg │ ├── photo-1524324463413-57e3d8392df1.jpg │ ├── photo-1534801022022-6e319a11f249.jpg │ ├── photo-1545420333-23a22b18b8fa.jfif │ ├── photo-1547377643-6016a03f3c41.jfif │ ├── photo-1547691889-841a6f1c5ca6.jpg │ ├── photo-1548625149-9129dad5eef7.jpg │ ├── photo-1548625149-d37da68f9a7f.jpg │ ├── photo-1569749450723-1836b067fb64.jpg │ └── photo-1595433562696-a8b1cb8bdad1.jpg ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.sass └── test.ts ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.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 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | npm-debug.log 39 | yarn-error.log 40 | testem.log 41 | /typings 42 | 43 | # System Files 44 | .DS_Store 45 | Thumbs.db 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Carousel for Angular 2 | 3 | 4 | 5 | A simple solution for horizontal scrolling images with lazy loading. 6 | 7 | Live demo can be found on [home page](http://ivylab.space/carousel). 8 | 9 | 🔬️ Help make IvyCarousel better by [answering a few questions](https://docs.google.com/forms/d/e/1FAIpQLSemPfIejDl3Pq4mFz32sFZgvLo7JbyXZPZFt4uDw9G4H92H8Q/viewform?usp=sf_link). 10 | 11 | ## Installation 12 | 13 | Install the npm package. 14 | ``` 15 | npm i angular-responsive-carousel 16 | ``` 17 | Import module: 18 | ```ts 19 | import {IvyCarouselModule} from 'angular-responsive-carousel'; 20 | 21 | @NgModule({ 22 | imports: [IvyCarouselModule] 23 | }) 24 | ``` 25 | 26 | ## Usage 27 | Put the contents of your cells in containers with the `carousel-cell` class. 28 | 29 | ```html 30 | 31 |
32 | 33 |
34 |
35 | ... 36 | 37 | ``` 38 | 39 | Or prepare an image array for the carousel. If necessary, specify in the settings the sizes of the cells and the carousel container. And also select the method of arranging images inside the cells using the objectFit property. 40 | 41 | ```html 42 | 44 | 45 | ``` 46 | ```ts 47 | images = [ 48 | {path: 'PATH_TO_IMAGE'}, 49 | ... 50 | ] 51 | ``` 52 | 53 | ## Lazy loading 54 | To use lazy loading, pass the carousel an array of images, as shown in the example above. Images will be uploaded only as needed, this will save you traffic. Using the `overflowCellsLimit` property, you can specify the number of images that will be loaded outside the visible area, which will allow the images to be loaded before they are displayed. 55 | 56 | 57 | ## Properties 58 | 59 | | name | type | default | description | 60 | |------|------|---------|-------------| 61 | | height | number | | Carousel height. | 62 | | width | number | | Carousel Width. | 63 | | cellWidth | number, '100%' | 200 | Cell width. | 64 | | cellsToShow | number | | The number of cells to display, regardless of the width of the container. | 65 | | cellsToScroll | number | 1 | The number of carousel cells to scroll per arrow click. | 66 | | loop | boolean | false | Infinite loop. | 67 | | lightDOM | boolean | false | Keep a limited number of cells in the DOM tree for an unlimited number of images. As the carousel scrolls, the images will be lazy loaded. This allows you not to overload the browser memory. This mode works only with images passed as an array. | 68 | | overflowCellsLimit | number | 3 | The number of carousel cells that will be stored for in the DOM tree outside the scope. | 69 | | freeScroll | boolean | false | The carousel will stop where the touch ended and will not automatically align. | 70 | | autoplay | boolean | false | Automatically start the carousel after initialization. | 71 | | autoplayInterval | number | 5000 | The interval between scrolling the carousel. Used together with autoplay. | 72 | | pauseOnHover | boolean | true | Stops autoplay if the cursor is over the carousel area. | 73 | | dots | boolean | false | Carousel progress bar. | 74 | | margin | number | 10 | Cell spacing. | 75 | | minSwipeDistance | number | 10 | Minimum distance for swipe. | 76 | | transitionDuration | number | 300 | Animation duration. | 77 | | transitionTimingFunction | 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear' | 'ease-in-out' | Smooth animation function. | 78 | | counter | boolean | false | Counter. | 79 | | counterSeparator | string | " / " | Counter separator. | 80 | | borderRadius | number | 0 | Border radius for carousel cells. | 81 | | arrows | boolean | true | Arrows for image navigation. | 82 | | arrowsOutside | boolean | false | Arrows on the outside of the carousel container. | 83 | | arrowsTheme | 'light', 'dark' | 'light' | Arrow color theme. | 84 | 85 | The IvyCarousel also has a Pro version, with an [extended API](http://ivylab.space/carousel). 86 | 87 | ## Author services 88 | 89 | Are you interested in this library but lacks features? Write to the author, he can do it for you. 90 | 91 | ## Roadmap 92 | 93 | `centerMode` - center the cells inside the container (Pro version). 94 | 95 | `fade` - fade in and fade out animation. 96 | 97 | `adaptiveHeight` - the height of the container is set based on the height of the tallest cell currently visible. -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "carouselNg12App": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "sass" 11 | }, 12 | "@schematics/angular:application": { 13 | "strict": true 14 | } 15 | }, 16 | "root": "", 17 | "sourceRoot": "src", 18 | "prefix": "app", 19 | "architect": { 20 | "build": { 21 | "builder": "@angular-devkit/build-angular:browser", 22 | "options": { 23 | "outputPath": "dist/carouselNg12App", 24 | "index": "src/index.html", 25 | "main": "src/main.ts", 26 | "polyfills": "src/polyfills.ts", 27 | "tsConfig": "tsconfig.app.json", 28 | "inlineStyleLanguage": "sass", 29 | "assets": [ 30 | "src/favicon.ico", 31 | "src/assets" 32 | ], 33 | "styles": [ 34 | "src/styles.sass" 35 | ], 36 | "scripts": [] 37 | }, 38 | "configurations": { 39 | "production": { 40 | "budgets": [ 41 | { 42 | "type": "initial", 43 | "maximumWarning": "500kb", 44 | "maximumError": "1mb" 45 | }, 46 | { 47 | "type": "anyComponentStyle", 48 | "maximumWarning": "2kb", 49 | "maximumError": "4kb" 50 | } 51 | ], 52 | "fileReplacements": [ 53 | { 54 | "replace": "src/environments/environment.ts", 55 | "with": "src/environments/environment.prod.ts" 56 | } 57 | ], 58 | "outputHashing": "all" 59 | }, 60 | "development": { 61 | "buildOptimizer": false, 62 | "optimization": false, 63 | "vendorChunk": true, 64 | "extractLicenses": false, 65 | "sourceMap": true, 66 | "namedChunks": true 67 | } 68 | }, 69 | "defaultConfiguration": "production" 70 | }, 71 | "serve": { 72 | "builder": "@angular-devkit/build-angular:dev-server", 73 | "configurations": { 74 | "production": { 75 | "browserTarget": "carouselNg12App:build:production" 76 | }, 77 | "development": { 78 | "browserTarget": "carouselNg12App:build:development" 79 | } 80 | }, 81 | "defaultConfiguration": "development" 82 | }, 83 | "extract-i18n": { 84 | "builder": "@angular-devkit/build-angular:extract-i18n", 85 | "options": { 86 | "browserTarget": "carouselNg12App:build" 87 | } 88 | }, 89 | "test": { 90 | "builder": "@angular-devkit/build-angular:karma", 91 | "options": { 92 | "main": "src/test.ts", 93 | "polyfills": "src/polyfills.ts", 94 | "tsConfig": "tsconfig.spec.json", 95 | "karmaConfig": "karma.conf.js", 96 | "inlineStyleLanguage": "sass", 97 | "assets": [ 98 | "src/favicon.ico", 99 | "src/assets" 100 | ], 101 | "styles": [ 102 | "src/styles.sass" 103 | ], 104 | "scripts": [] 105 | } 106 | } 107 | } 108 | }, 109 | "angular-responsive-carousel": { 110 | "projectType": "library", 111 | "root": "projects/angular-responsive-carousel", 112 | "sourceRoot": "projects/angular-responsive-carousel/src", 113 | "prefix": "lib", 114 | "architect": { 115 | "build": { 116 | "builder": "@angular-devkit/build-angular:ng-packagr", 117 | "options": { 118 | "project": "projects/angular-responsive-carousel/ng-package.json" 119 | }, 120 | "configurations": { 121 | "production": { 122 | "tsConfig": "projects/angular-responsive-carousel/tsconfig.lib.prod.json" 123 | }, 124 | "development": { 125 | "tsConfig": "projects/angular-responsive-carousel/tsconfig.lib.json" 126 | } 127 | }, 128 | "defaultConfiguration": "production" 129 | }, 130 | "test": { 131 | "builder": "@angular-devkit/build-angular:karma", 132 | "options": { 133 | "main": "projects/angular-responsive-carousel/src/test.ts", 134 | "tsConfig": "projects/angular-responsive-carousel/tsconfig.spec.json", 135 | "karmaConfig": "projects/angular-responsive-carousel/karma.conf.js" 136 | } 137 | } 138 | } 139 | } 140 | }, 141 | "defaultProject": "carouselNg12App" 142 | } 143 | -------------------------------------------------------------------------------- /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-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/carouselNg12App'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-responsive-carousel", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "dependencies": { 12 | "@angular/animations": "~12.0.3", 13 | "@angular/common": "~12.0.3", 14 | "@angular/compiler": "~12.0.3", 15 | "@angular/core": "~12.0.3", 16 | "@angular/forms": "~12.0.3", 17 | "@angular/platform-browser": "~12.0.3", 18 | "@angular/platform-browser-dynamic": "~12.0.3", 19 | "@angular/router": "~12.0.3", 20 | "rxjs": "~6.6.0", 21 | "tslib": "^2.1.0", 22 | "zone.js": "~0.11.4" 23 | }, 24 | "devDependencies": { 25 | "@angular-devkit/build-angular": "~12.0.3", 26 | "@angular/cli": "~12.0.3", 27 | "@angular/compiler-cli": "~12.0.3", 28 | "@types/jasmine": "~3.6.0", 29 | "@types/node": "^12.11.1", 30 | "jasmine-core": "~3.7.0", 31 | "karma": "~6.3.0", 32 | "karma-chrome-launcher": "~3.1.0", 33 | "karma-coverage": "~2.0.3", 34 | "karma-jasmine": "~4.0.0", 35 | "karma-jasmine-html-reporter": "^1.5.0", 36 | "ng-packagr": "^12.0.0", 37 | "typescript": "~4.2.3" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/README.md: -------------------------------------------------------------------------------- 1 | # Carousel for Angular 2 | 3 | 4 | 5 | A simple solution for horizontal scrolling images with lazy loading. 6 | 7 | Live demo can be found on [home page](http://ivylab.space/carousel). 8 | 9 | 🔬️ Help make IvyCarousel better by [answering a few questions](https://docs.google.com/forms/d/e/1FAIpQLSemPfIejDl3Pq4mFz32sFZgvLo7JbyXZPZFt4uDw9G4H92H8Q/viewform?usp=sf_link). 10 | 11 | ## Installation 12 | 13 | Install the npm package. 14 | ``` 15 | npm i angular-responsive-carousel 16 | ``` 17 | Import module: 18 | ```ts 19 | import {IvyCarouselModule} from 'angular-responsive-carousel'; 20 | 21 | @NgModule({ 22 | imports: [IvyCarouselModule] 23 | }) 24 | ``` 25 | 26 | ## Usage 27 | Put the contents of your cells in containers with the `carousel-cell` class. 28 | 29 | ```html 30 | 31 |
32 | 33 |
34 |
35 | ... 36 | 37 | ``` 38 | 39 | Or prepare an image array for the carousel. If necessary, specify in the settings the sizes of the cells and the carousel container. And also select the method of arranging images inside the cells using the objectFit property. 40 | 41 | ```html 42 | 44 | 45 | ``` 46 | ```ts 47 | images = [ 48 | {path: 'PATH_TO_IMAGE'}, 49 | ... 50 | ] 51 | ``` 52 | 53 | ## Lazy loading 54 | To use lazy loading, pass the carousel an array of images, as shown in the example above. Images will be uploaded only as needed, this will save you traffic. Using the `overflowCellsLimit` property, you can specify the number of images that will be loaded outside the visible area, which will allow the images to be loaded before they are displayed. 55 | 56 | 57 | ## Properties 58 | 59 | | name | type | default | description | 60 | |------|------|---------|-------------| 61 | | height | number | | Carousel height. | 62 | | width | number | | Carousel Width. | 63 | | cellWidth | number, '100%' | 200 | Cell width. | 64 | | cellsToShow | number | | The number of cells to display, regardless of the width of the container. | 65 | | cellsToScroll | number | 1 | The number of carousel cells to scroll per arrow click. | 66 | | loop | boolean | false | Infinite loop. | 67 | | lightDOM | boolean | false | Keep a limited number of cells in the DOM tree for an unlimited number of images. As the carousel scrolls, the images will be lazy loaded. This allows you not to overload the browser memory. This mode works only with images passed as an array. | 68 | | overflowCellsLimit | number | 3 | The number of carousel cells that will be stored for in the DOM tree outside the scope. | 69 | | freeScroll | boolean | false | The carousel will stop where the touch ended and will not automatically align. | 70 | | autoplay | boolean | false | Automatically start the carousel after initialization. | 71 | | autoplayInterval | number | 5000 | The interval between scrolling the carousel. Used together with autoplay. | 72 | | pauseOnHover | boolean | true | Stops autoplay if the cursor is over the carousel area. | 73 | | dots | boolean | false | Carousel progress bar. | 74 | | margin | number | 10 | Cell spacing. | 75 | | minSwipeDistance | number | 10 | Minimum distance for swipe. | 76 | | transitionDuration | number | 300 | Animation duration. | 77 | | transitionTimingFunction | 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear' | 'ease-in-out' | Smooth animation function. | 78 | | counter | boolean | false | Counter. | 79 | | counterSeparator | string | " / " | Counter separator. | 80 | | borderRadius | number | 0 | Border radius for carousel cells. | 81 | | arrows | boolean | true | Arrows for image navigation. | 82 | | arrowsOutside | boolean | false | Arrows on the outside of the carousel container. | 83 | | arrowsTheme | 'light', 'dark' | 'light' | Arrow color theme. | 84 | 85 | The IvyCarousel also has a Pro version, with an [extended API](http://ivylab.space/carousel). 86 | 87 | ## Author services 88 | 89 | Are you interested in this library but lacks features? Write to the author, he can do it for you. 90 | 91 | ## Roadmap 92 | 93 | `centerMode` - center the cells inside the container (Pro version). 94 | 95 | `fade` - fade in and fade out animation. 96 | 97 | `adaptiveHeight` - the height of the container is set based on the height of the tallest cell currently visible. -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/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-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, '../../coverage/angular-responsive-carousel'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/angular-responsive-carousel", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-responsive-carousel", 3 | "version": "2.1.0", 4 | "description": "Carousel for Angular. A simple solution for horizontal scrolling images with lazy loading.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/ivylaboratory/angular-carousel.git" 8 | }, 9 | "author": { 10 | "name": "Nikita Drozhzhin", 11 | "email": "drozhzhin.n.e@gmail.com" 12 | }, 13 | "homepage": "http://ivylab.space/carousel", 14 | "keywords": [ 15 | "Angular", 16 | "ngx", 17 | "Carousel", 18 | "Swiper", 19 | "Lazy loading", 20 | "Image slider" 21 | ], 22 | "license": "Apache License 2.0", 23 | "bugs": { 24 | "url": "https://github.com/ivylaboratory/angular-carousel/issues" 25 | }, 26 | "peerDependencies": { 27 | "@angular/common": "^12.0.5", 28 | "@angular/core": "^12.0.5" 29 | }, 30 | "dependencies": { 31 | "tslib": "^2.1.0" 32 | } 33 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/carousel.component.html: -------------------------------------------------------------------------------- 1 |
{{counter}}
2 | 3 |
4 |
5 | 6 | 7 | 8 |
12 | 13 | 18 | 19 |
20 | 21 |
22 | 23 |
24 |
25 |
26 |
27 | 28 |
32 | 33 |
34 |
35 |
-------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/carousel.component.sass: -------------------------------------------------------------------------------- 1 | @import 'variables' 2 | 3 | \:host 4 | position: relative 5 | display: block 6 | top: 0 7 | left: 0 8 | width: 100% 9 | height: 100% 10 | user-select: none 11 | z-index: 10000 12 | transform-origin: top left 13 | box-sizing: border-box 14 | .carousel-container 15 | overflow: hidden 16 | width: 100% 17 | height: 100% 18 | cursor: grab 19 | .carousel-container.carousel-moving 20 | cursor: grabbing 21 | .carousel-counter 22 | text-align: right 23 | position: absolute 24 | z-index: 30 25 | transition: opacity 200ms 26 | top: 8px 27 | right: 24px 28 | border-radius: 13px 29 | background-color: rgba(23, 37, 68, 0.3) 30 | font-size: 11px 31 | color: #ffffff 32 | padding: 5px 7px 33 | line-height: initial 34 | ::ng-deep 35 | .carousel-cells 36 | transition: transform 200ms 37 | width: 100% 38 | height: 100% 39 | display: block 40 | will-change: transform 41 | .carousel-cell.swiper-prev-image 42 | transform: translate3d(-100%, 0, 0) 43 | .carousel-cell.swiper-next-image 44 | transform: translate3d(100%, 0, 0) 45 | .carousel-cell 46 | width: 100% 47 | height: 100% 48 | position: absolute 49 | overflow: hidden 50 | img, 51 | video 52 | width: 100% 53 | height: 100% 54 | position: relative 55 | object-fit: contain 56 | img.swiper-hide 57 | display: none 58 | .carousel-play 59 | position: absolute 60 | top: 0 61 | left: 0 62 | bottom: 0 63 | right: 0 64 | z-index: 1 65 | 66 | .carousel-arrow 67 | width: 40px 68 | height: 40px 69 | background-color: #fff 70 | background-repeat: no-repeat 71 | background-size: 31px 72 | background-position: center 73 | border-radius: 100px 74 | position: absolute 75 | top: 50% 76 | margin-top: -20px 77 | z-index: 10 78 | cursor: pointer 79 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15) 80 | .carousel-arrow-prev 81 | left: 10px 82 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMTUuNDEgMTYuNTlMMTAuODMgMTJsNC41OC00LjU5TDE0IDZsLTYgNiA2IDYgMS40MS0xLjQxeiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMFYweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==) 83 | .carousel-arrow-next 84 | right: 10px 85 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNOC41OSAxNi41OUwxMy4xNyAxMiA4LjU5IDcuNDEgMTAgNmw2IDYtNiA2LTEuNDEtMS40MXoiLz48cGF0aCBkPSJNMCAwaDI0djI0SDBWMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=) 86 | .carousel-arrows-outside 87 | .carousel-arrow-prev 88 | left: -60px 89 | .carousel-arrow-next 90 | right: -60px 91 | .carousel-dark-arrows 92 | .carousel-arrow 93 | filter: invert(1) 94 | .carousel-arrow-disabled 95 | cursor: default 96 | opacity: 0.5 97 | .carousel-dots 98 | position: absolute 99 | left: 0 100 | right: 0 101 | bottom: 0 102 | z-index: 10 103 | text-align: center 104 | .carousel-dot 105 | display: inline-block 106 | border: 2px solid #fff 107 | border-radius: 100px 108 | margin: 4px 109 | width: 8px 110 | height: 8px 111 | .carousel-dot-active 112 | background-color: #fff -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/carousel.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectorRef, Component, ElementRef, ViewChild, EventEmitter, HostBinding, HostListener, Input, Output, OnDestroy, SimpleChanges} from '@angular/core'; 2 | 3 | import {Images} from './interfaces'; 4 | import {Touches} from './touches'; 5 | import {Carousel} from './carousel'; 6 | import {Container} from './container'; 7 | import {Cells} from './cells'; 8 | import {Slide} from './slide'; 9 | import {Utils} from './utils'; 10 | import {Properties as CarouselProperties} from './interfaces'; 11 | 12 | 13 | @Component({ 14 | selector: 'carousel, [carousel]', 15 | templateUrl: './carousel.component.html', 16 | styleUrls: ['./carousel.component.sass'] 17 | }) 18 | 19 | export class CarouselComponent implements OnDestroy { 20 | carousel:any; 21 | container:any; 22 | utils:any; 23 | cells:any; 24 | slide:any; 25 | _id!: string; 26 | _images!: Images; 27 | touches: any; 28 | landscapeMode: any; 29 | minTimeout = 30; 30 | isVideoPlaying: boolean = false; 31 | _isCounter: boolean = false; 32 | _width!: number; 33 | _cellWidth: number | '100%' = 200; 34 | _loop: boolean = false; 35 | _lightDOM: boolean = false; 36 | isMoving: boolean = false; 37 | isNgContent: boolean = false; 38 | cellLength!: number; 39 | dotsArr: any; 40 | carouselProperties!: CarouselProperties; 41 | savedCarouselWidth!: number; 42 | 43 | get isContainerLocked() { 44 | if (this.carousel) { 45 | return this.carousel.isContainerLocked; 46 | } 47 | } 48 | 49 | get slideCounter() { 50 | if (this.carousel) { 51 | return this.carousel.slideCounter; 52 | } 53 | } 54 | 55 | get lapCounter() { 56 | if (this.carousel) { 57 | return this.carousel.lapCounter; 58 | } 59 | } 60 | 61 | get isLandscape() { 62 | return window.innerWidth > window.innerHeight; 63 | } 64 | 65 | get isSafari(): any { 66 | const ua = navigator.userAgent.toLowerCase(); 67 | if (ua.indexOf('safari') !== -1) { 68 | return !(ua.indexOf('chrome') > -1); 69 | } 70 | } 71 | 72 | get counter() { 73 | let counter; 74 | 75 | if (this.loop) { 76 | counter = this.slideCounter % this.cellLength; 77 | } else { 78 | counter = this.slideCounter; 79 | } 80 | 81 | return counter + 1 + this.counterSeparator + this.cellLength; 82 | } 83 | 84 | get cellsElement() { 85 | return this.elementRef.nativeElement.querySelector('.carousel-cells'); 86 | } 87 | 88 | get isArrows() { 89 | return this.arrows && !this.freeScroll; 90 | } 91 | 92 | get isCounter() { 93 | return this._isCounter && this.cellLength > 1; 94 | } 95 | 96 | get activeDotIndex() { 97 | return this.slideCounter % this.cellLength; 98 | } 99 | 100 | get cellLimit() { 101 | if (this.carousel) { 102 | return this.carousel.cellLimit; 103 | } 104 | } 105 | 106 | get carouselWidth() { 107 | return this.elementRef.nativeElement.clientWidth; 108 | } 109 | 110 | @Output() events: EventEmitter < any > = new EventEmitter < any > (); 111 | 112 | @Input() id!: number; 113 | @Input() height: number = 200; 114 | @Input() width!: number; 115 | @Input() autoplay: boolean = false; 116 | @Input() autoplayInterval: number = 5000; 117 | @Input() pauseOnHover: boolean = true; 118 | @Input() dots: boolean = false; 119 | @Input() borderRadius!: number; 120 | @Input() margin: number = 10; 121 | @Input() objectFit: 'contain' | 'cover' | 'none' = 'cover'; 122 | @Input() minSwipeDistance: number = 10; 123 | @Input() transitionDuration: number = 200; 124 | @Input() transitionTimingFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' = 'ease-out'; 125 | @Input() videoProperties: any; 126 | @Input() counterSeparator: string = " / "; 127 | @Input() overflowCellsLimit: number = 3; 128 | @Input() listeners: 'auto' | 'mouse and touch' = 'mouse and touch'; 129 | @Input() cellsToShow!: number; 130 | @Input() cellsToScroll: number = 1; 131 | @Input() freeScroll: boolean = false; 132 | @Input() arrows: boolean = true; 133 | @Input() arrowsOutside: boolean = false; 134 | @Input() arrowsTheme: 'light' | 'dark' = 'light'; 135 | 136 | @Input() 137 | set images(images: Images & any) { 138 | this._images = images; 139 | } 140 | get images() { 141 | return this._images; 142 | } 143 | 144 | @Input('cellWidth') set cellWidth(value: number | '100%') { 145 | if (value) { 146 | this._cellWidth = value; 147 | } 148 | } 149 | 150 | @Input('counter') set isCounter(value: boolean) { 151 | if (value) { 152 | this._isCounter = value; 153 | } 154 | } 155 | 156 | @Input('loop') set loop(value: boolean) { 157 | if (value) { 158 | this._loop = value; 159 | } 160 | } 161 | 162 | get loop() { 163 | if (this.images) { 164 | return this._loop; 165 | } else { 166 | return false; 167 | } 168 | } 169 | 170 | @Input('lightDOM') set lightDOM(value: boolean) { 171 | if (value) { 172 | this._lightDOM = value; 173 | } 174 | } 175 | 176 | get lightDOM() { 177 | if (this.images) { 178 | return this._lightDOM; 179 | } else { 180 | return false; 181 | } 182 | } 183 | 184 | @HostBinding('class.carousel') hostClassCarousel: boolean = true; 185 | @HostBinding('style.height') hostStyleHeight!: string; 186 | @HostBinding('style.width') hostStyleWidth!: string; 187 | 188 | @HostListener('window:resize', ['$event']) 189 | onWindowResize(event: any) { 190 | if (this.utils.visibleWidth !== this.savedCarouselWidth) { 191 | this.resize(); 192 | } 193 | } 194 | 195 | @HostListener('mousemove', ['$event']) 196 | onMousemove(event: MouseEvent) { 197 | if (this.autoplay && this.pauseOnHover) { 198 | this.carousel.stopAutoplay(); 199 | } 200 | } 201 | 202 | @HostListener('mouseleave', ['$event']) 203 | onMouseleave(event: MouseEvent) { 204 | if (this.autoplay && this.pauseOnHover) { 205 | this.carousel.autoplay(); 206 | } 207 | } 208 | 209 | constructor( 210 | private elementRef: ElementRef, 211 | private ref: ChangeDetectorRef) { 212 | 213 | } 214 | 215 | ngOnInit() { 216 | this.isNgContent = this.cellsElement.children.length > 0; 217 | 218 | this.touches = new Touches({ 219 | element: this.cellsElement, 220 | listeners: this.listeners, 221 | mouseListeners: { 222 | "mousedown": "handleMousedown", 223 | "mouseup": "handleMouseup" 224 | } 225 | }); 226 | 227 | this.touches.on('touchstart', this.handleTouchstart); 228 | this.touches.on('horizontal-swipe', this.handleHorizontalSwipe); 229 | this.touches.on('touchend', this.handleTouchend); 230 | this.touches.on('mousedown', this.handleTouchstart); 231 | this.touches.on('mouseup', this.handleTouchend); 232 | this.touches.on('tap', this.handleTap); 233 | 234 | this.setDimensions(); 235 | } 236 | 237 | ngAfterViewInit() { 238 | this.initCarousel(); 239 | this.cellLength = this.getCellLength(); 240 | this.dotsArr = Array(this.cellLength).fill(1); 241 | this.ref.detectChanges(); 242 | this.carousel.lineUpCells(); 243 | this.savedCarouselWidth = this.carouselWidth; 244 | 245 | /* Start detecting changes in the DOM tree */ 246 | this.detectDomChanges(); 247 | } 248 | 249 | ngOnChanges(changes: SimpleChanges) { 250 | if (changes.width || changes.height || changes.images) { 251 | this.setDimensions(); 252 | this.initCarousel(); 253 | this.carousel.lineUpCells(); 254 | this.ref.detectChanges(); 255 | } 256 | } 257 | 258 | ngOnDestroy() { 259 | this.touches.destroy(); 260 | //this.carousel.destroy(); 261 | } 262 | 263 | initCarousel() { 264 | this.carouselProperties = { 265 | id: this.id, 266 | cellsElement: this.elementRef.nativeElement.querySelector('.carousel-cells'), 267 | hostElement: this.elementRef.nativeElement, 268 | images: this.images, 269 | cellWidth: this.getCellWidth(), 270 | loop: this.loop, 271 | autoplayInterval: this.autoplayInterval, 272 | overflowCellsLimit: this.overflowCellsLimit, 273 | visibleWidth: this.width, 274 | margin: this.margin, 275 | minSwipeDistance: this.minSwipeDistance, 276 | transitionDuration: this.transitionDuration, 277 | transitionTimingFunction: this.transitionTimingFunction, 278 | videoProperties: this.videoProperties, 279 | eventHandler: this.events, 280 | freeScroll: this.freeScroll, 281 | lightDOM: this.lightDOM 282 | }; 283 | 284 | this.utils = new Utils(this.carouselProperties); 285 | this.cells = new Cells(this.carouselProperties, this.utils); 286 | this.container = new Container(this.carouselProperties, this.utils, this.cells); 287 | this.slide = new Slide(this.carouselProperties, this.utils, this.cells, this.container); 288 | this.carousel = new Carousel(this.carouselProperties, this.utils, this.cells, this.container, this.slide); 289 | 290 | if (this.autoplay) { 291 | this.carousel.autoplay(); 292 | } 293 | } 294 | 295 | resize() { 296 | this.landscapeMode = this.isLandscape; 297 | this.savedCarouselWidth = this.carouselWidth; 298 | 299 | this.carouselProperties.cellWidth = this.getCellWidth(); 300 | this.cells.updateProperties(this.carouselProperties); 301 | this.carousel.updateProperties(this.carouselProperties); 302 | this.container.updateProperties(this.carouselProperties); 303 | this.slide.updateProperties(this.carouselProperties); 304 | this.utils.updateProperties(this.carouselProperties); 305 | this.carousel.lineUpCells(); 306 | this.slide.select(0); 307 | this.ref.detectChanges(); 308 | } 309 | 310 | detectDomChanges() { 311 | const observer = new MutationObserver((mutations) => { 312 | this.onDomChanges(); 313 | }); 314 | 315 | var config = { 316 | attributes: true, 317 | childList: true, 318 | characterData: true 319 | }; 320 | observer.observe(this.cellsElement, config); 321 | } 322 | 323 | onDomChanges() { 324 | this.cellLength = this.getCellLength(); 325 | this.carousel.lineUpCells(); 326 | this.ref.detectChanges(); 327 | } 328 | 329 | setDimensions() { 330 | this.hostStyleHeight = this.height + 'px'; 331 | this.hostStyleWidth = this.width + 'px'; 332 | } 333 | 334 | getImage(index:number) { 335 | return this.carousel.getImage(index); 336 | } 337 | 338 | handleTouchstart = (event: any) => { 339 | this.touches.addEventListeners("mousemove", "handleMousemove"); 340 | this.carousel.handleTouchstart(event); 341 | this.isMoving = true; 342 | } 343 | 344 | handleHorizontalSwipe = (event: any) => { 345 | event.preventDefault(); 346 | this.carousel.handleHorizontalSwipe(event); 347 | } 348 | 349 | handleTouchend = (event: any) => { 350 | const touches = event.touches; 351 | this.carousel.handleTouchend(event); 352 | this.touches.removeEventListeners("mousemove", "handleMousemove"); 353 | this.isMoving = false; 354 | } 355 | 356 | handleTap = (event: any) => { 357 | let outboundEvent: any = { 358 | name: 'click' 359 | } 360 | let nodes = Array.prototype.slice.call(this.cellsElement.children); 361 | let cellElement = event.srcElement.closest(".carousel-cell"); 362 | const i = nodes.indexOf(cellElement); 363 | const cellIndex = nodes.indexOf(cellElement); 364 | 365 | if (this.images) { 366 | //outboundEvent.fileIndex = this.carousel.getFileIndex(i); 367 | //outboundEvent.file = this.carousel.getFile(cellIndex); 368 | } else { 369 | outboundEvent.cellIndex = cellIndex; 370 | } 371 | } 372 | 373 | handleTransitionendCellContainer(event:any) { 374 | if (event.target['className'] === 'carousel-cells') { 375 | this.carousel.handleTransitionend(); 376 | } 377 | } 378 | 379 | getCellWidth() { 380 | let elementWidth = this.carouselWidth; 381 | 382 | if (this.cellsToShow) { 383 | let margin = this.cellsToShow > 1 ? this.margin : 0; 384 | let totalMargin = margin * (this.cellsToShow - 1); 385 | return (elementWidth - totalMargin) / this.cellsToShow; 386 | } 387 | 388 | if (this._cellWidth === '100%') { 389 | return elementWidth; 390 | } else { 391 | return this._cellWidth; 392 | } 393 | } 394 | 395 | next() { 396 | this.carousel.next(this.cellsToScroll); 397 | this.carousel.stopAutoplay(); 398 | } 399 | 400 | prev() { 401 | this.carousel.prev(this.cellsToScroll); 402 | this.carousel.stopAutoplay(); 403 | } 404 | 405 | isNextArrowDisabled() { 406 | if (this.carousel) { 407 | return this.carousel.isNextArrowDisabled(); 408 | } 409 | } 410 | 411 | isPrevArrowDisabled() { 412 | if (this.carousel) { 413 | return this.carousel.isPrevArrowDisabled(); 414 | } 415 | } 416 | 417 | getCellLength() { 418 | if (this.images) { 419 | return this.images.length; 420 | } else { 421 | return this.cellsElement.children.length; 422 | } 423 | } 424 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/carousel.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {CommonModule} from '@angular/common'; 3 | import {CarouselComponent} from './carousel.component'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | CarouselComponent 8 | ], 9 | imports: [ 10 | CommonModule 11 | ], 12 | exports: [ 13 | CarouselComponent 14 | ], 15 | providers: [ 16 | 17 | ], 18 | bootstrap: [ 19 | 20 | ], 21 | entryComponents: [ 22 | CarouselComponent 23 | ] 24 | }) 25 | export class IvyCarouselModule { } 26 | -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/carousel.ts: -------------------------------------------------------------------------------- 1 | import {Properties} from './interfaces'; 2 | 3 | export class Carousel { 4 | cellsElement: HTMLElement | undefined; 5 | 6 | /* The slide length has been limited by the limitSlideLength() method */ 7 | isSlideLengthLimited: boolean = false; 8 | 9 | isContentImages: boolean = true; 10 | visibleWidth!: number; 11 | isLazyLoad: boolean = true; 12 | isContainerLocked: boolean = true; 13 | alignCells: "left" | "center" = "left"; 14 | initialContainerPosition: number = 0; 15 | autoplayId: any; 16 | containerPullLimit = 100; 17 | 18 | get cellLength() { 19 | return this.cells.cellLength; 20 | } 21 | 22 | get cellLengthInLightDOMMode() { 23 | if (this.images) { 24 | let cellLength = this.numberOfVisibleCells + this.overflowCellsLimit * 2; 25 | if (cellLength > this.images.length) { 26 | cellLength = this.images.length; 27 | } 28 | return cellLength; 29 | } else { 30 | return this.cellLength; 31 | } 32 | } 33 | 34 | get lastCellIndex() { 35 | return this.images.length ? (this.images.length - 1) : (this.cells.cellLength - 1); 36 | } 37 | 38 | get overflowCellsLimit() { 39 | return this.utils.overflowCellsLimit; 40 | } 41 | 42 | get cellLimit() { 43 | if (this.isLightDOM) { 44 | let cellLimit = this.numberOfVisibleCells + this.overflowCellsLimit * 2; 45 | 46 | if (cellLimit < this.numberOfVisibleCells) { 47 | cellLimit = this.numberOfVisibleCells; 48 | } 49 | 50 | return cellLimit; 51 | } else { 52 | return this.properties.images.length; 53 | } 54 | } 55 | 56 | get isLightDOM() { 57 | return this.properties.lightDOM || this.properties.loop; 58 | } 59 | 60 | get images() { 61 | return this.properties.images; 62 | } 63 | 64 | get margin() { 65 | return this.properties.margin; 66 | } 67 | 68 | get minSwipeDistance() { 69 | return this.properties.minSwipeDistance; 70 | } 71 | 72 | get transitionDuration() { 73 | return this.properties.transitionDuration; 74 | } 75 | 76 | get transitionTimingFunction() { 77 | return this.properties.transitionTimingFunction; 78 | } 79 | 80 | get fullCellWidth() { 81 | return this.properties.cellWidth + this.margin; 82 | } 83 | 84 | get numberOfVisibleCells() { 85 | return this.utils.numberOfVisibleCells; 86 | } 87 | 88 | get lapCounter() { 89 | return Math.floor(this.slide.counter / this.cellLengthInLightDOMMode); 90 | } 91 | 92 | get slideCounter() { 93 | return this.slide.counter; 94 | } 95 | 96 | constructor( 97 | private properties: Properties, 98 | private utils: any, 99 | private cells: any, 100 | private container: any, 101 | private slide: any) { 102 | 103 | this.init(); 104 | } 105 | 106 | updateProperties(properties: Properties) { 107 | this.properties = properties; 108 | } 109 | 110 | init() { 111 | this.cellsElement = this.properties.cellsElement; 112 | this.visibleWidth = this.properties.visibleWidth || this.cellsElement!.parentElement!.clientWidth; 113 | } 114 | 115 | destroy() { 116 | clearInterval(this.autoplayId); 117 | } 118 | 119 | lineUpCells() { 120 | this.cells.lineUp(); 121 | } 122 | 123 | handleTouchstart = (event: any) => { 124 | this.container.handleTouchstart(); 125 | this.slide.handleTouchstart(event); 126 | } 127 | 128 | handleHorizontalSwipe = (event: any) => { 129 | this.container.handleHorizontalSwipe(); 130 | } 131 | 132 | handleTouchend = (event: any) => { 133 | if (this.properties.freeScroll) { 134 | this.container.handleTouchend(); 135 | } else { 136 | this.container.handleTouchend(true); 137 | this.slide.handleTouchend(event); 138 | } 139 | } 140 | 141 | handleTransitionend() { 142 | this.slide.handleTransitionend(); 143 | } 144 | 145 | getImage(index:number) { 146 | return this.cells.getImage(index); 147 | } 148 | 149 | next(length: number = 1) { 150 | if (!this.isNextArrowDisabled()) { 151 | this.slide.next(length); 152 | } 153 | } 154 | 155 | prev(length: number = 1) { 156 | this.slide.prev(length); 157 | } 158 | 159 | isNextArrowDisabled = () => { 160 | return this.slide.isNextArrowDisabled(); 161 | } 162 | 163 | isPrevArrowDisabled = () => { 164 | return this.slide.isPrevArrowDisabled(); 165 | } 166 | 167 | autoplay() { 168 | this.autoplayId = setInterval(() => { 169 | this.next(); 170 | }, this.properties.autoplayInterval); 171 | } 172 | 173 | stopAutoplay() { 174 | if (this.autoplayId) { 175 | clearInterval(this.autoplayId); 176 | } 177 | } 178 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/cells.ts: -------------------------------------------------------------------------------- 1 | import {Properties as CarouselProperties, Image} from './interfaces'; 2 | 3 | export interface Cell { 4 | index: number, 5 | positionX: number, 6 | img: { 7 | image: Image, 8 | imageIndex: number 9 | } 10 | } 11 | 12 | export class ImageUtils { 13 | cellStack: Cell[] = []; 14 | element:any; 15 | 16 | constructor(element: HTMLElement | undefined) { 17 | this.element = element; 18 | } 19 | 20 | getImages() { 21 | return this.cellStack.filter(this.filter); 22 | } 23 | 24 | filter(cell: Cell) { 25 | return cell.img !== undefined; 26 | } 27 | } 28 | 29 | export class Cells { 30 | cells: HTMLCollection | undefined; 31 | element!: HTMLElement; 32 | visibleWidth: number | undefined; 33 | counter: number = 0; 34 | imageUtils; 35 | 36 | get images() { 37 | return this.carouselProperties.images; 38 | } 39 | 40 | get cellLength() { 41 | return this.cells ? this.cells.length : 0; 42 | } 43 | 44 | get fullCellWidth() { 45 | return this.carouselProperties.cellWidth + this.carouselProperties.margin; 46 | } 47 | 48 | get cellLengthInLightDOMMode() { 49 | if (this.images) { 50 | let cellLength = this.numberOfVisibleCells + this.overflowCellsLimit * 2; 51 | 52 | if (cellLength > this.images.length) { 53 | cellLength = this.images.length; 54 | } 55 | return cellLength; 56 | } else { 57 | return this.cellLength; 58 | } 59 | } 60 | 61 | get numberOfVisibleCells() { 62 | return this.utils.numberOfVisibleCells; 63 | } 64 | 65 | get overflowCellsLimit() { 66 | return this.utils.overflowCellsLimit; 67 | } 68 | 69 | get isLightDOM() { 70 | return this.carouselProperties.lightDOM || this.carouselProperties.loop; 71 | } 72 | 73 | constructor( 74 | private carouselProperties: CarouselProperties, 75 | private utils: any) { 76 | 77 | this.imageUtils = new ImageUtils(this.element); 78 | this.init(carouselProperties); 79 | } 80 | 81 | updateProperties(carouselProperties: CarouselProperties) { 82 | this.carouselProperties = carouselProperties; 83 | } 84 | 85 | lineUp() { 86 | const cells = this.element ? this.element.children : []; 87 | this.imageUtils.cellStack = []; 88 | 89 | for (var i = 0; i < cells.length; i++) { 90 | let cell = cells[i]; 91 | let positionX = this.getCellPositionInContainer(i); 92 | (cell as HTMLElement).style.transform = 'translateX(' + positionX + 'px)'; 93 | (cell as HTMLElement).style.width = this.carouselProperties.cellWidth + 'px'; 94 | 95 | if (this.getImage(i)) { 96 | this.imageUtils.cellStack.push({ 97 | index: i, 98 | positionX, 99 | img: this.getImage(i)!['image'] 100 | }); 101 | } 102 | }; 103 | } 104 | 105 | ifSequenceOfCellsIsChanged() { 106 | const cells:any = this.element.children; 107 | return cells[0]['style'].transform !== 'translateX(0px)'; 108 | } 109 | 110 | getCellPositionInContainer(cellIndexInDOMTree: number) { 111 | let positionIndex = this.getCellIndexInContainer(cellIndexInDOMTree); 112 | return positionIndex * this.fullCellWidth; 113 | } 114 | 115 | getCellIndexInContainer(cellIndexInDOMTree: number) { 116 | let positionIndex; 117 | 118 | if (!this.isLightDOM) { 119 | return cellIndexInDOMTree; 120 | } 121 | 122 | let cellLength = this.cellLengthInLightDOMMode; 123 | let counter = this.counter - this.overflowCellsLimit; 124 | 125 | if (counter > cellLength) { 126 | counter = counter % cellLength; 127 | } 128 | 129 | if (counter < 0) { 130 | return cellIndexInDOMTree; 131 | } else { 132 | positionIndex = cellIndexInDOMTree - counter; 133 | if (positionIndex < 0) { 134 | positionIndex = cellLength + positionIndex; 135 | } 136 | } 137 | 138 | return positionIndex; 139 | } 140 | 141 | getImage(cellIndex: number) { 142 | if (!this.images) { 143 | return; 144 | } 145 | 146 | let imageIndex = this.getImageIndex(cellIndex); 147 | let file = this.images[imageIndex]; 148 | 149 | if (file && !file.type) { 150 | file.type = 'image'; 151 | } 152 | 153 | return { 154 | image: this.images[imageIndex], 155 | imageIndex 156 | }; 157 | } 158 | 159 | getImageIndex(cellIndexInDOMTree: number) { 160 | const positionIndex = this.getCellIndexInContainer(cellIndexInDOMTree); 161 | let imageIndex; 162 | 163 | if (this.counter > this.overflowCellsLimit) { 164 | let cellLimitOverflow = this.counter - this.overflowCellsLimit; 165 | imageIndex = positionIndex + cellLimitOverflow; 166 | 167 | if (this.images && this.carouselProperties.loop) { 168 | imageIndex = imageIndex % this.images.length; 169 | } 170 | } else { 171 | imageIndex = cellIndexInDOMTree; 172 | } 173 | 174 | return imageIndex; 175 | } 176 | 177 | setCounter(value: number) { 178 | this.counter = value; 179 | } 180 | 181 | init(carouselProperties: CarouselProperties) { 182 | this.element = this.carouselProperties.cellsElement; 183 | this.cells = this.element.children; 184 | this.visibleWidth = this.carouselProperties.visibleWidth || this.element!.parentElement!.clientWidth; 185 | } 186 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/container.ts: -------------------------------------------------------------------------------- 1 | import {Properties as CarouselProperties} from './interfaces'; 2 | 3 | export class Container { 4 | /* The index of the new position relative to 5 | * the active index, for example -1 or +1 6 | */ 7 | newPositionIndex: number = 0; 8 | isPositionCorrection: boolean = false; 9 | initialPositionX: number = 0; 10 | initialElementPositionX: number = 0; 11 | isLocked: boolean = true; 12 | pullLimit: number = 100; 13 | startTime: number = 0; 14 | startX: number = 0; 15 | moveX: number = 0; 16 | isSwipeInProgress: boolean = false; 17 | 18 | get visibleWidth() { 19 | return this.utils.visibleWidth; 20 | } 21 | 22 | get overflowCellsLimit() { 23 | return this.utils.overflowCellsLimit; 24 | } 25 | 26 | get images() { 27 | return this.carouselProperties.images; 28 | } 29 | 30 | get element() { 31 | return this.carouselProperties.cellsElement; 32 | } 33 | 34 | get freeScroll() { 35 | return this.carouselProperties.freeScroll; 36 | } 37 | 38 | get fullCellWidth() { 39 | return this.carouselProperties.cellWidth + this.carouselProperties.margin; 40 | } 41 | 42 | get numberOfVisibleCells() { 43 | return this.utils.numberOfVisibleCells; 44 | } 45 | 46 | get transitionDuration() { 47 | return this.carouselProperties.transitionDuration; 48 | } 49 | 50 | get transitionTimingFunction() { 51 | return this.carouselProperties.transitionTimingFunction; 52 | } 53 | 54 | get cellLength() { 55 | if (this.images) { 56 | return this.images.length; 57 | } else { 58 | return this.cells.cellLength; 59 | } 60 | } 61 | 62 | get cellLengthInLightDOMMode() { 63 | if (this.images) { 64 | let cellLength = this.numberOfVisibleCells + this.overflowCellsLimit * 2; 65 | if (cellLength > this.images.length) { 66 | cellLength = this.images.length; 67 | } 68 | return cellLength; 69 | } else { 70 | return this.cellLength; 71 | } 72 | } 73 | 74 | get tooFewCells() { 75 | return this.numberOfVisibleCells > this.cellLength; 76 | } 77 | 78 | get disabled() { 79 | return this.tooFewCells; 80 | } 81 | 82 | get margin() { 83 | return this.carouselProperties.margin; 84 | } 85 | 86 | get isLightDOM() { 87 | return this.carouselProperties.lightDOM || this.carouselProperties.loop; 88 | } 89 | 90 | constructor(private carouselProperties: CarouselProperties, 91 | private utils:any, 92 | private cells:any) { 93 | 94 | this.init() 95 | } 96 | 97 | updateProperties(carouselProperties: CarouselProperties) { 98 | this.carouselProperties = carouselProperties; 99 | } 100 | 101 | init() { 102 | this.setWidth(); 103 | } 104 | 105 | handleTouchstart() { 106 | this.startX = this.utils.getStartX(event); 107 | this.startTime = new Date().getTime(); 108 | this.initialElementPositionX = this.getInitialElementPositionX(); 109 | } 110 | 111 | handleHorizontalSwipe() { 112 | if (this.disabled) { 113 | return; 114 | } 115 | 116 | if (!this.isSwipeInProgress) { 117 | this.startX = this.utils.getStartX(event); 118 | this.startTime = new Date().getTime(); 119 | this.initialElementPositionX = this.getInitialElementPositionX(); 120 | } 121 | 122 | this.isSwipeInProgress = true; 123 | this.moveX = this.utils.getMoveX(event); 124 | this.move(); 125 | } 126 | 127 | handleTouchend(simpleProcessing: boolean = false) { 128 | if (this.disabled) { 129 | return; 130 | } 131 | 132 | /* If touchend was passed to the Slide class */ 133 | if (simpleProcessing) { 134 | this.isSwipeInProgress = false; 135 | return; 136 | } 137 | 138 | this.isSwipeInProgress = false; 139 | this.finishMoving(); 140 | this.clearInitialValues(); 141 | } 142 | 143 | move() { 144 | let positionX: number = this.getMovePositionX(); 145 | const isPulled = this.detectPulled(); 146 | const direction = this.getDirection(); 147 | 148 | if (isPulled) { 149 | if (isPulled.edge === "left" && direction === "right" || 150 | isPulled.edge === "right" && direction === "left") { 151 | positionX = this.slowdownOnPull(positionX); 152 | } 153 | } 154 | 155 | this.transformPositionX(positionX, 0); 156 | 157 | if (this.freeScroll) { 158 | this.initialPositionX = positionX; 159 | } 160 | 161 | if (isPulled) { 162 | if (isPulled.edge === 'left' && isPulled.overflowX > this.pullLimit) { 163 | this.initialPositionX = 0; 164 | } 165 | if (isPulled.edge === 'right' && isPulled.overflowX > this.pullLimit) { 166 | this.initialPositionX = positionX; 167 | } 168 | } 169 | } 170 | 171 | getMovePositionX() { 172 | const distance = this.getDistance(); 173 | return this.initialElementPositionX - distance; 174 | } 175 | 176 | getDistance() { 177 | return this.startX - this.moveX; 178 | } 179 | 180 | /* If the container is pulled out of the left or right border */ 181 | detectPulled() { 182 | const currentPositionX = this.getCurrentPositionX(); 183 | 184 | if (currentPositionX > 0) { 185 | return { 186 | edge: 'left', 187 | positionX: currentPositionX, 188 | overflowX: Math.abs(currentPositionX) 189 | } 190 | } 191 | 192 | if (currentPositionX < this.getEndPosition()) { 193 | return { 194 | edge: 'right', 195 | positionX: currentPositionX, 196 | overflowX: Math.abs(currentPositionX - this.getEndPosition()) 197 | } 198 | } 199 | 200 | return undefined; 201 | } 202 | 203 | slowdownOnPull(_positionX: number) { 204 | let distance = Math.abs(this.getDistance()); 205 | const endPosition = this.getEndPosition(); 206 | const isPulled = this.detectPulled(); 207 | 208 | if (!isPulled) { 209 | return 0; 210 | } 211 | 212 | const decelerationRatio = 3 + isPulled.overflowX / 50; 213 | let positionX:number = 0; 214 | 215 | if (isPulled.edge === 'left') { 216 | 217 | if (this.initialElementPositionX < 0) { 218 | distance = distance - Math.abs(this.initialElementPositionX); 219 | } 220 | 221 | const rubberPositionX = distance / decelerationRatio; 222 | positionX = rubberPositionX; 223 | 224 | if (this.initialElementPositionX > 0) { 225 | positionX = this.initialElementPositionX + rubberPositionX; 226 | } 227 | 228 | if (positionX > this.pullLimit) { 229 | positionX = this.pullLimit; 230 | } 231 | } 232 | 233 | if (isPulled.edge === 'right') { 234 | const rubberPositionX = endPosition + (((this.initialElementPositionX - distance) - endPosition) / decelerationRatio); 235 | const containerWidth = this.getWidth(); 236 | 237 | positionX = rubberPositionX; 238 | 239 | if (this.initialElementPositionX < -(containerWidth - this.visibleWidth)) { 240 | positionX = ((containerWidth - this.visibleWidth) + this.initialElementPositionX) + rubberPositionX; 241 | } 242 | 243 | if (positionX < endPosition - this.pullLimit) { 244 | positionX = endPosition - this.pullLimit; 245 | } 246 | } 247 | 248 | return positionX; 249 | } 250 | 251 | finishMoving() { 252 | const positionX = this.getMovePositionX(); 253 | let newPositionX:number = 0; 254 | 255 | if (this.freeScroll) { 256 | newPositionX = this.getInertia(); 257 | } 258 | 259 | /* Align container while pulling */ 260 | newPositionX = this.getAlignedPositionOnPull(newPositionX); 261 | 262 | this.transformPositionX(newPositionX); 263 | this.setInitialPosition(positionX); 264 | } 265 | 266 | /* Returns the new position of the container with inertia */ 267 | getInertia() { 268 | const distance = this.getDistance(); 269 | const currentTime = new Date().getTime(); 270 | const tapLength = currentTime - this.startTime; 271 | let inertia = (distance / tapLength) * 100; 272 | 273 | return this.initialPositionX - inertia; 274 | } 275 | 276 | getAlignedPositionOnPull(newPositionX:number) { 277 | const direction = this.getDirection(); 278 | 279 | if (direction === 'left') { 280 | let endPosition = this.getEndPosition(); 281 | if (newPositionX < endPosition) { 282 | return endPosition; 283 | } 284 | } 285 | if (direction === 'right') { 286 | if (newPositionX > 0) { 287 | return 0; 288 | } 289 | } 290 | 291 | return newPositionX; 292 | } 293 | 294 | getCurrentPositionX() { 295 | const parentPosition = this.element!.parentElement!.getBoundingClientRect(); 296 | const position = this.element.getBoundingClientRect(); 297 | return position.left - parentPosition.left; 298 | } 299 | 300 | getEndPosition() { 301 | if (this.isLightDOM) { 302 | let imagesInContainer = this.cells.imageUtils.getImages(); 303 | return -(imagesInContainer.length * this.fullCellWidth - this.visibleWidth - this.margin); 304 | } else { 305 | const width = this.getWidth(); 306 | const visibleWidth = this.element!.parentElement!.clientWidth; 307 | return visibleWidth - width; 308 | } 309 | } 310 | 311 | transformPositionX(value:number, duration = this.transitionDuration) { 312 | if (value === undefined) { 313 | return; 314 | } 315 | 316 | this.element.style.transition = 'transform ' + duration + 'ms ' + this.transitionTimingFunction; 317 | this.element.style.transform = 'translateX(' + value + 'px)'; 318 | } 319 | 320 | getWidth() { 321 | let width = this.cellLengthInLightDOMMode * this.fullCellWidth; 322 | let totalImageWidth = this.cellLength * this.fullCellWidth; 323 | 324 | if (totalImageWidth < width) { 325 | width = totalImageWidth; 326 | } 327 | 328 | return this.isLightDOM ? width : totalImageWidth; 329 | } 330 | 331 | setWidth() { 332 | const width = this.getWidth(); 333 | this.element.style.width = width + "px"; 334 | } 335 | 336 | setInitialPosition(position:number) { 337 | this.initialPositionX = position; 338 | } 339 | 340 | getElementPosition() { 341 | return this.element.getBoundingClientRect(); 342 | } 343 | 344 | getInitialElementPositionX() { 345 | const carouselElementPosition = this.utils.getCarouselElementPosition()['left']; 346 | return this.getElementPosition()['left'] - carouselElementPosition; 347 | } 348 | 349 | clearInitialValues() { 350 | this.startX = this.moveX = 0; 351 | } 352 | 353 | getDirection() { 354 | const direction = Math.sign(this.startX - this.moveX); 355 | 356 | if (direction === -1) { 357 | return 'right'; 358 | } 359 | if (direction === 1) { 360 | return 'left'; 361 | } 362 | 363 | return undefined; 364 | } 365 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface Properties { 2 | id: number; 3 | cellsElement: HTMLElement; 4 | hostElement: HTMLElement; 5 | images: any; 6 | cellWidth: number; 7 | loop: boolean; 8 | autoplayInterval: number; 9 | overflowCellsLimit: number; 10 | visibleWidth: number; 11 | margin: number; 12 | minSwipeDistance: number; 13 | transitionDuration: number; 14 | transitionTimingFunction: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'; 15 | videoProperties: any; 16 | eventHandler ? : any; 17 | freeScroll: boolean; 18 | lightDOM: boolean; 19 | } 20 | 21 | export interface Images { 22 | [index: number]: { 23 | path: string; 24 | width?: number; 25 | height?: number; 26 | //type?: 'image' | 'video' 27 | }; 28 | } 29 | 30 | export interface Image { 31 | path: string; 32 | width?: number; 33 | height?: number; 34 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/slide.ts: -------------------------------------------------------------------------------- 1 | import {Properties as CarouselProperties} from './interfaces'; 2 | 3 | export interface Properties { 4 | carouselProperties: CarouselProperties; 5 | } 6 | 7 | export class Slide { 8 | slideLength: number = 0; 9 | isSlideInProgress: boolean = false; 10 | direction: 'left' | 'right' | undefined; 11 | counter: number = 0; 12 | _counter: number = 0; 13 | distance: number = 0; 14 | distanceAbs: number = 0; 15 | visibleWidth!: number; 16 | isNotClickOnArrow: boolean = false; 17 | initialPositionX: number = 0; 18 | currentPositionX: number = 0; 19 | 20 | /* The slide length has been limited by the limitSlideLength() method */ 21 | isSlideLengthLimited: boolean = false; 22 | 23 | get fullCellWidth() { 24 | return this.carouselProperties.cellWidth + this.carouselProperties.margin; 25 | } 26 | 27 | get margin() { 28 | return this.carouselProperties.margin; 29 | } 30 | 31 | get minSwipeDistance() { 32 | return this.carouselProperties.minSwipeDistance; 33 | } 34 | 35 | get numberOfVisibleCells() { 36 | return this.utils.numberOfVisibleCells; 37 | } 38 | 39 | get visibleCellsOverflowContainer() { 40 | return this.utils.visibleCellsOverflowContainer; 41 | } 42 | 43 | /* The position to which the container returns after each slide 44 | * in the light DUM tree mode. 45 | */ 46 | get fixedContainerPosition() { 47 | return -(this.overflowCellsLimit * this.fullCellWidth); 48 | } 49 | 50 | get overflowCellsLimit() { 51 | return this.utils.overflowCellsLimit; 52 | } 53 | 54 | get images() { 55 | return this.carouselProperties.images; 56 | } 57 | 58 | /* Number of cell elements in the DUM tree */ 59 | get cellLength() { 60 | if (this.isLightDOM) { 61 | return this.cells.cellLengthInLightDOMMode; 62 | } else { 63 | if (this.images) { 64 | return this.images.length; 65 | } else { 66 | return this.cells.cellLength; 67 | } 68 | } 69 | } 70 | 71 | get isLightDOM() { 72 | return this.carouselProperties.lightDOM || this.carouselProperties.loop; 73 | } 74 | 75 | constructor(private carouselProperties: CarouselProperties, 76 | private utils: any, 77 | private cells: any, 78 | private container: any) { 79 | 80 | this.init(); 81 | } 82 | 83 | updateProperties(carouselProperties: CarouselProperties) { 84 | this.carouselProperties = carouselProperties; 85 | this.setVisibleWidth(); 86 | } 87 | 88 | init() { 89 | this.visibleWidth = this.carouselProperties.visibleWidth || this.carouselProperties.hostElement.clientWidth; 90 | } 91 | 92 | handleTouchstart() { 93 | /* Touchstart event is not called for arrow */ 94 | this.isNotClickOnArrow = true; 95 | this.isSlideLengthLimited = false; 96 | 97 | if (!this.isSlideInProgress) { 98 | this.initialPositionX = this.container.getCurrentPositionX(); 99 | } 100 | } 101 | 102 | handleTouchend() { 103 | if (!this.isNotClickOnArrow) { 104 | return; 105 | } 106 | this.currentPositionX = this.container.getCurrentPositionX(); 107 | this.distanceAbs = Math.abs(this.initialPositionX - this.currentPositionX); 108 | this.distance = this.initialPositionX - this.currentPositionX; 109 | this.direction = this.getDirection(); 110 | this.isNotClickOnArrow = false; 111 | this.handleSlide(); 112 | } 113 | 114 | handleTransitionend() { 115 | this.setCounter(); 116 | this.isSlideInProgress = false; 117 | 118 | if (this.isLightDOM) { 119 | this.alignContainerFast(); 120 | } 121 | } 122 | 123 | handleSlide(customSlideLength: number | undefined = undefined) { 124 | let isUsingButton = customSlideLength; 125 | let newPositionX; 126 | 127 | if (isUsingButton && this.isSlideInProgress || !this.direction) { 128 | return; 129 | } 130 | 131 | /* Custom slide length is used in arrows */ 132 | if (customSlideLength) { 133 | this.slideLength = this.limitSlideLength(customSlideLength); 134 | 135 | if (!this.isSlideInProgress) { 136 | this.initialPositionX = this.container.getCurrentPositionX(); 137 | } 138 | } else { 139 | this.slideLength = this.getSlideLength(this.distanceAbs); 140 | } 141 | 142 | /* Store intermediate counter value */ 143 | this._counter = this.getPreliminaryCounter(); 144 | 145 | if (this.direction === 'left') { 146 | if (!customSlideLength) { 147 | this.slideLength = this.limitSlideLength(this.getSlideLength(this.distanceAbs)); 148 | } 149 | 150 | this._counter = this.getPreliminaryCounter(); 151 | let isSlidesEnd = this.isSlidesEnd(this._counter); 152 | newPositionX = this.getPositionByIndex(this._counter); 153 | 154 | if (isSlidesEnd) { 155 | this._counter = this.counter; 156 | 157 | newPositionX = this.getPositionByIndex(this.counter); 158 | this.slideLength = 0; 159 | } 160 | } 161 | 162 | if (this.direction === 'right') { 163 | if (!customSlideLength) { 164 | this.slideLength = this.getSlideLength(this.distanceAbs); 165 | } 166 | 167 | if (this._counter < 0) { 168 | this._counter = this.counter; 169 | this.slideLength = this.counter; 170 | } 171 | 172 | newPositionX = this.getPositionByIndex(this.counter - this.slideLength); 173 | } 174 | 175 | if (this.container.getCurrentPositionX() !== newPositionX) { 176 | this.isSlideInProgress = true; 177 | this.container.transformPositionX(newPositionX); 178 | } 179 | } 180 | 181 | next(length: number = 1) { 182 | this.direction = 'left'; 183 | this.handleSlide(length); 184 | } 185 | 186 | prev(length: number = 1) { 187 | this.direction = 'right'; 188 | this.handleSlide(length); 189 | } 190 | 191 | select(index: number) { 192 | if (index > this.cellLength - 1) { 193 | return; 194 | } 195 | 196 | if (index > this.counter) { 197 | let length = index - this.counter; 198 | this.next(length); 199 | } 200 | 201 | if (index < this.counter) { 202 | let length = this.counter - index; 203 | this.prev(length); 204 | } 205 | } 206 | 207 | getPreliminaryCounter() { 208 | if (this.direction === 'left') { 209 | return this.counter + this.slideLength; 210 | } 211 | 212 | if (this.direction === 'right') { 213 | return this.counter - this.slideLength; 214 | } 215 | 216 | return 0; 217 | } 218 | 219 | /* 220 | * Limits the length of the slide during calls to the next() and prev() 221 | * methods if the specified position is outside the cell length 222 | */ 223 | limitSlideLength(slideLength: number) { 224 | if (slideLength > 1) { 225 | for (var i = 0; i < slideLength; i++) { 226 | let newCounter = this.counter + (slideLength - i); 227 | 228 | if (!this.isSlidesEnd(newCounter)) { 229 | slideLength = slideLength - i; 230 | this.isSlideLengthLimited = i > 0; 231 | break; 232 | } 233 | } 234 | } 235 | return slideLength; 236 | } 237 | 238 | /* Offset the container to show the last cell completely */ 239 | getPositionCorrection(counter:number) { 240 | let correction = 0; 241 | let isLastSlide = this.isLastSlide(counter); 242 | 243 | if (this.carouselProperties.loop || this.direction === "right") { 244 | return 0; 245 | } 246 | 247 | if (this.isSlideLengthLimited || isLastSlide) { 248 | let cellsWidth = this.cells.cellLengthInLightDOMMode * this.fullCellWidth; 249 | 250 | if (this.visibleWidth < cellsWidth) { 251 | correction = -(this.numberOfVisibleCells * this.fullCellWidth - this.visibleWidth - this.margin); 252 | } 253 | 254 | if (correction >= -this.margin) { 255 | correction = 0; 256 | } 257 | } 258 | 259 | return correction; 260 | } 261 | 262 | getSlideLength(distanceAbs: number) { 263 | let isLastSlide = this.isLastSlide(this.counter); 264 | 265 | /* If the last cell does not fit entirely, then the 266 | * length of the swipe to the left, from the extreme 267 | * right position, may be shorter than usual. 268 | */ 269 | if (isLastSlide && this.direction === "right") { 270 | distanceAbs = distanceAbs + this.visibleWidth % this.fullCellWidth; 271 | } 272 | 273 | let length = Math.floor(distanceAbs / this.fullCellWidth); 274 | 275 | if (distanceAbs % this.fullCellWidth >= this.minSwipeDistance) { 276 | length++; 277 | } 278 | 279 | return length; 280 | } 281 | 282 | getDistanceAbs() { 283 | return Math.abs(this.initialPositionX - this.currentPositionX); 284 | } 285 | 286 | getDirection() { 287 | const direction = Math.sign(this.initialPositionX - this.currentPositionX); 288 | 289 | if (direction === -1) { 290 | return 'right'; 291 | } 292 | if (direction === 1) { 293 | return 'left'; 294 | } 295 | 296 | return undefined; 297 | } 298 | 299 | isSlidesEnd(counter: number) { 300 | let margin = this.visibleCellsOverflowContainer ? 1 : 0; 301 | let imageLength = this.images ? this.images.length : this.cells.cellLength; 302 | 303 | if (this.carouselProperties.loop) { 304 | return false; 305 | } else { 306 | return (imageLength - counter + margin) < this.numberOfVisibleCells; 307 | } 308 | } 309 | 310 | isLastSlide(counter: number) { 311 | return this.isSlidesEnd(counter + 1) 312 | } 313 | 314 | setCounter() { 315 | if (this.direction === 'left') { 316 | this.counter = this.counter + this.slideLength; 317 | } 318 | 319 | if (this.direction === 'right') { 320 | this.counter = this.counter - this.slideLength; 321 | } 322 | } 323 | 324 | getPositionByIndex(_counter: number) { 325 | let correction = this.getPositionCorrection(this.counter + this.slideLength); 326 | let position; 327 | 328 | if (correction !== 0) { 329 | correction = correction + this.fullCellWidth 330 | } 331 | 332 | if (this.direction === 'right') { 333 | correction = 0; 334 | } 335 | 336 | if (this.isLightDOM && this.isLightDOMMode(_counter) || 337 | this.isLightDOM && this.ifLeftDOMModeAtEnd(_counter)) { 338 | 339 | let initialPosition = this.getPositionWithoutCorrection(this.initialPositionX); 340 | let counterDifference = _counter - this.counter; 341 | position = initialPosition - ((counterDifference * this.fullCellWidth) - correction); 342 | } else { 343 | position = -((_counter * this.fullCellWidth) - correction); 344 | } 345 | 346 | position = this.provideSafePosition(position); 347 | 348 | return position; 349 | } 350 | 351 | provideSafePosition(position: number) { 352 | const endPosition = this.container.getEndPosition(); 353 | 354 | if (this.direction === 'left') { 355 | if (position > 0) { 356 | position = 0; 357 | } 358 | } 359 | 360 | if (this.direction === 'right') { 361 | if (position < endPosition) { 362 | position = endPosition; 363 | } 364 | } 365 | 366 | return position; 367 | } 368 | 369 | getPositionWithoutCorrection(value: number) { 370 | let remainder = Math.round(value) % this.fullCellWidth; 371 | 372 | if (remainder !== 0) { 373 | return value - (this.fullCellWidth + remainder); 374 | } else { 375 | return value; 376 | } 377 | } 378 | 379 | isNextArrowDisabled() { 380 | return this.isLastSlide(this.counter) || 381 | (!this.visibleCellsOverflowContainer && this.cellLength <= this.numberOfVisibleCells) || 382 | (this.visibleCellsOverflowContainer && this.cellLength < this.numberOfVisibleCells) 383 | } 384 | 385 | isPrevArrowDisabled() { 386 | return this.counter === 0; 387 | } 388 | 389 | alignContainerFast() { 390 | if (this.isLightDOMMode(this.counter)) { 391 | let positionX = this.fixedContainerPosition; 392 | this.container.transformPositionX(positionX, 0); 393 | 394 | this.cells.setCounter(this.counter); 395 | this.cells.lineUp(); 396 | } else if (this.ifLeftDOMModeToBeginning(this.counter)) { 397 | /* If we have already exited the light DOM mode but 398 | * the cells are still out of place 399 | */ 400 | if (this.cells.ifSequenceOfCellsIsChanged()) { 401 | let positionX = -(this.counter * this.fullCellWidth); 402 | this.container.transformPositionX(positionX, 0); 403 | 404 | this.cells.setCounter(this.counter); 405 | this.cells.lineUp(); 406 | } 407 | } else if (this.ifLeftDOMModeAtEnd(this.counter)) { 408 | let containerPositionX = this.container.getCurrentPositionX(); 409 | let containerWidth = this.container.getWidth(); 410 | this.visibleWidth; 411 | 412 | if (this.isLastSlide(this.counter) && 413 | containerWidth + containerPositionX >= this.visibleWidth) { 414 | return; 415 | } 416 | 417 | let correction = this.getPositionCorrection(this.counter); 418 | 419 | if (correction !== 0) { 420 | correction = correction + this.fullCellWidth 421 | } 422 | 423 | if (this.direction === 'right') { 424 | correction = 0; 425 | } 426 | 427 | let positionX = this.fixedContainerPosition + correction; 428 | 429 | this.container.transformPositionX(positionX, 0); 430 | this.cells.setCounter(this.counter); 431 | this.cells.lineUp(); 432 | } 433 | } 434 | 435 | isLightDOMMode(counter: number) { 436 | let flag; 437 | let remainderOfCells = this.images.length - this.overflowCellsLimit - this.numberOfVisibleCells; 438 | 439 | if (!this.isLightDOM) { 440 | return false; 441 | } 442 | 443 | if (counter > this.overflowCellsLimit && this.direction === "left" && 444 | counter <= remainderOfCells) { 445 | flag = true; 446 | } 447 | 448 | if (counter >= this.overflowCellsLimit && this.direction === "right" && 449 | counter < remainderOfCells) { 450 | flag = true; 451 | } 452 | 453 | if (this.counter > this.overflowCellsLimit && this.direction === "left" && 454 | this.counter <= remainderOfCells) { 455 | flag = true; 456 | } 457 | 458 | if (this.counter >= this.overflowCellsLimit && this.direction === "right" && 459 | this.counter < remainderOfCells) { 460 | flag = true; 461 | } 462 | 463 | return flag; 464 | } 465 | 466 | ifLeftDOMModeAtEnd(counter: number) { 467 | let flag; 468 | let remainderOfCells = this.images.length - this.overflowCellsLimit - this.numberOfVisibleCells; 469 | 470 | if (counter >= remainderOfCells) { 471 | flag = true; 472 | } 473 | 474 | if (this.counter >= remainderOfCells) { 475 | flag = true; 476 | } 477 | 478 | return flag; 479 | } 480 | 481 | ifLeftDOMModeToBeginning(counter: number) { 482 | let flag; 483 | 484 | if (counter <= this.overflowCellsLimit) { 485 | flag = true; 486 | } 487 | 488 | if (this.counter <= this.overflowCellsLimit) { 489 | flag = true; 490 | } 491 | 492 | return flag; 493 | } 494 | 495 | setVisibleWidth() { 496 | this.visibleWidth = this.carouselProperties.visibleWidth || this.carouselProperties.hostElement.clientWidth; 497 | } 498 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/theming.sass: -------------------------------------------------------------------------------- 1 | @import 'variables' 2 | 3 | carousel 4 | .carousel-counter 5 | //font-size: $carousel-counter-font-size !important 6 | //background-color: $carousel-counter-background-color !important 7 | //color: $carousel-counter-color !important 8 | //top: $carousel-counter-top !important 9 | //right: $carousel-counter-right !important 10 | //padding: $carousel-counter-padding !important 11 | .carousel-cells 12 | //transition: transform $carousel-transition-duration !important -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/touches.ts: -------------------------------------------------------------------------------- 1 | export interface Properties { 2 | element: HTMLElement; 3 | listeners?: 'auto' | 'mouse and touch'; 4 | touchListeners?: any; 5 | mouseListeners?: any; 6 | otherListeners?: any; 7 | resize?: boolean; 8 | } 9 | 10 | export type EventType = undefined | 'touchend' | 'pan' | 'pinch' | 'horizontal-swipe' | 'vertical-swipe' | 'tap' | 'longtap'; 11 | export type TouchHandler = 'handleTouchstart' | 'handleTouchmove' | 'handleTouchend'; 12 | export type MouseHandler = 'handleMousedown' | 'handleMousemove' | 'handleMouseup'; 13 | 14 | export class Touches { 15 | properties: Properties; 16 | element: HTMLElement; 17 | elementPosition: ClientRect; 18 | eventType: EventType = undefined; 19 | handlers: any = {}; 20 | startX = 0; 21 | startY = 0; 22 | lastTap = 0; 23 | doubleTapTimeout: any; 24 | doubleTapMinTimeout = 300; 25 | tapMinTimeout = 200; 26 | touchstartTime = 0; 27 | i: number = 0; 28 | isMousedown = false; 29 | 30 | _touchListeners: any = { 31 | "touchstart": "handleTouchstart", 32 | "touchmove": "handleTouchmove", 33 | "touchend": "handleTouchend" 34 | } 35 | _mouseListeners: any = { 36 | "mousedown": "handleMousedown", 37 | "mousemove": "handleMousemove", 38 | "mouseup": "handleMouseup", 39 | "wheel": "handleWheel" 40 | } 41 | _otherListeners: any = { 42 | "resize": "handleResize" 43 | } 44 | 45 | get touchListeners() { 46 | return this.properties.touchListeners ? this.properties.touchListeners : this._touchListeners; 47 | } 48 | 49 | get mouseListeners() { 50 | return this.properties.mouseListeners ? this.properties.mouseListeners : this._mouseListeners; 51 | } 52 | 53 | get otherListeners() { 54 | return this.properties.otherListeners ? this.properties.otherListeners : this._otherListeners; 55 | } 56 | 57 | constructor(properties: Properties) { 58 | this.properties = properties; 59 | this.element = this.properties.element; 60 | this.elementPosition = this.getElementPosition(); 61 | 62 | this.toggleEventListeners('addEventListener'); 63 | } 64 | 65 | destroy() { 66 | this.toggleEventListeners('removeEventListener'); 67 | } 68 | 69 | toggleEventListeners(action: 'addEventListener' | 'removeEventListener') { 70 | let listeners; 71 | 72 | if (this.properties.listeners === 'mouse and touch') { 73 | listeners = Object.assign(this.touchListeners, this.mouseListeners); 74 | } else { 75 | listeners = this.detectTouchScreen() ? this.touchListeners : this.mouseListeners; 76 | } 77 | 78 | if (this.properties.resize) { 79 | listeners = Object.assign(listeners, this.otherListeners); 80 | } 81 | 82 | for (var listener in listeners) { 83 | const handler: MouseHandler = listeners[listener]; 84 | 85 | // Window 86 | if (listener === "resize") { 87 | if (action === 'addEventListener') { 88 | window.addEventListener(listener, this[handler], false); 89 | } 90 | if (action === 'removeEventListener') { 91 | window.removeEventListener(listener, this[handler], false); 92 | } 93 | // Document 94 | } else if (listener === 'mouseup' || listener === "mousemove") { 95 | if (action === 'addEventListener') { 96 | document.addEventListener(listener, this[handler], {passive: false}); 97 | } 98 | if (action === 'removeEventListener') { 99 | document.removeEventListener(listener, this[handler], false); 100 | } 101 | // Element 102 | } else { 103 | if (action === 'addEventListener') { 104 | this.element.addEventListener(listener, this[handler], false); 105 | } 106 | if (action === 'removeEventListener') { 107 | this.element.removeEventListener(listener, this[handler], false); 108 | } 109 | } 110 | } 111 | } 112 | 113 | addEventListeners(listener: string) { 114 | const handler: MouseHandler = this._mouseListeners[listener]; 115 | window.addEventListener(listener, this[handler], false); 116 | } 117 | 118 | removeEventListeners(listener: string) { 119 | const handler: MouseHandler = this._mouseListeners[listener]; 120 | window.removeEventListener(listener, this[handler], false); 121 | } 122 | 123 | /* 124 | * Listeners 125 | */ 126 | 127 | /* Touchstart */ 128 | 129 | handleTouchstart = (event: any) => { 130 | this.elementPosition = this.getElementPosition(); 131 | this.touchstartTime = new Date().getTime(); 132 | 133 | if (this.eventType === undefined) { 134 | this.getTouchstartPosition(event); 135 | } 136 | 137 | this.runHandler("touchstart", event); 138 | } 139 | 140 | 141 | /* Touchmove */ 142 | 143 | handleTouchmove = (event: any) => { 144 | const touches = event.touches; 145 | 146 | // Pan 147 | if (this.detectPan(touches)) { 148 | this.runHandler("pan", event); 149 | } 150 | 151 | // Pinch 152 | if (this.detectPinch(event)) { 153 | this.runHandler("pinch", event); 154 | } 155 | 156 | // Linear swipe 157 | switch (this.detectLinearSwipe(event)) { 158 | case "horizontal-swipe": 159 | event.swipeType = "horizontal-swipe"; 160 | this.runHandler("horizontal-swipe", event); 161 | break; 162 | case "vertical-swipe": 163 | event.swipeType = "vertical-swipe"; 164 | this.runHandler("vertical-swipe", event); 165 | break; 166 | } 167 | 168 | // Linear swipe 169 | if (this.detectLinearSwipe(event) || 170 | this.eventType === 'horizontal-swipe' || 171 | this.eventType === 'vertical-swipe') { 172 | 173 | this.handleLinearSwipe(event); 174 | } 175 | } 176 | 177 | handleLinearSwipe(event: any) { 178 | //event.preventDefault(); 179 | 180 | this.i++; 181 | 182 | if (this.i > 3) { 183 | this.eventType = this.getLinearSwipeType(event); 184 | } 185 | 186 | if (this.eventType === 'horizontal-swipe') { 187 | this.runHandler('horizontal-swipe', event); 188 | } 189 | 190 | if (this.eventType === 'vertical-swipe') { 191 | this.runHandler('vertical-swipe', event); 192 | } 193 | } 194 | 195 | 196 | /* Touchend */ 197 | 198 | handleTouchend = (event: any) => { 199 | const touches = event.touches; 200 | 201 | // Double Tap 202 | if (this.detectDoubleTap()) { 203 | this.runHandler("double-tap", event); 204 | } 205 | 206 | // Tap 207 | this.detectTap(); 208 | 209 | this.runHandler("touchend", event); 210 | this.eventType = 'touchend'; 211 | 212 | if (touches && touches.length === 0) { 213 | this.eventType = undefined; 214 | this.i = 0; 215 | } 216 | } 217 | 218 | 219 | /* Mousedown */ 220 | 221 | handleMousedown = (event: any) => { 222 | this.isMousedown = true; 223 | this.elementPosition = this.getElementPosition(); 224 | this.touchstartTime = new Date().getTime(); 225 | 226 | if (this.eventType === undefined) { 227 | this.getMousedownPosition(event); 228 | } 229 | 230 | this.runHandler("mousedown", event); 231 | } 232 | 233 | 234 | /* Mousemove */ 235 | 236 | handleMousemove = (event: any) => { 237 | //event.preventDefault(); 238 | 239 | if (!this.isMousedown) { 240 | return; 241 | } 242 | 243 | // Pan 244 | this.runHandler("pan", event); 245 | 246 | // Linear swipe 247 | switch (this.detectLinearSwipe(event)) { 248 | case "horizontal-swipe": 249 | event.swipeType = "horizontal-swipe"; 250 | this.runHandler("horizontal-swipe", event); 251 | break; 252 | case "vertical-swipe": 253 | event.swipeType = "vertical-swipe"; 254 | this.runHandler("vertical-swipe", event); 255 | break; 256 | } 257 | 258 | // Linear swipe 259 | if (this.detectLinearSwipe(event) || 260 | this.eventType === 'horizontal-swipe' || 261 | this.eventType === 'vertical-swipe') { 262 | 263 | this.handleLinearSwipe(event); 264 | } 265 | } 266 | 267 | 268 | /* Mouseup */ 269 | 270 | handleMouseup = (event: any) => { 271 | 272 | // Tap 273 | this.detectTap(); 274 | 275 | this.isMousedown = false; 276 | this.runHandler("mouseup", event); 277 | this.eventType = undefined; 278 | this.i = 0; 279 | } 280 | 281 | 282 | /* Wheel */ 283 | 284 | handleWheel = (event: any) => { 285 | this.runHandler("wheel", event); 286 | } 287 | 288 | /* Resize */ 289 | 290 | handleResize = (event: any) => { 291 | this.runHandler("resize", event); 292 | } 293 | 294 | runHandler(eventName: any, response: any) { 295 | if (this.handlers[eventName]) { 296 | this.handlers[eventName](response); 297 | } 298 | } 299 | 300 | 301 | /* 302 | * Detection 303 | */ 304 | 305 | detectPan(touches: any) { 306 | return touches.length === 1 && !this.eventType || this.eventType === 'pan'; 307 | } 308 | 309 | detectDoubleTap() { 310 | if (this.eventType != undefined) { 311 | return; 312 | } 313 | 314 | const currentTime = new Date().getTime(); 315 | const tapLength = currentTime - this.lastTap; 316 | 317 | clearTimeout(this.doubleTapTimeout); 318 | 319 | if (tapLength < this.doubleTapMinTimeout && tapLength > 0) { 320 | return true; 321 | } else { 322 | this.doubleTapTimeout = setTimeout(() => { 323 | clearTimeout(this.doubleTapTimeout); 324 | }, this.doubleTapMinTimeout); 325 | } 326 | this.lastTap = currentTime; 327 | 328 | return undefined; 329 | } 330 | 331 | detectTap(): void { 332 | if (this.eventType != undefined) { 333 | return; 334 | } 335 | 336 | const currentTime = new Date().getTime(); 337 | const tapLength = currentTime - this.touchstartTime; 338 | 339 | if (tapLength > 0) { 340 | if (tapLength < this.tapMinTimeout) { 341 | this.runHandler("tap", event); 342 | } else { 343 | this.runHandler("longtap", event); 344 | } 345 | } 346 | } 347 | 348 | detectPinch(event: any) { 349 | const touches = event.touches; 350 | return (touches.length === 2 && this.eventType === undefined) || this.eventType === 'pinch'; 351 | } 352 | 353 | detectLinearSwipe(event: any) { 354 | const touches = event.touches; 355 | 356 | if (touches) { 357 | if (touches.length === 1 && !this.eventType || this.eventType === 'horizontal-swipe' || this.eventType === 'vertical-swipe') { 358 | return this.getLinearSwipeType(event); 359 | } 360 | } else { 361 | if (!this.eventType || this.eventType === 'horizontal-swipe' || this.eventType === 'vertical-swipe') { 362 | return this.getLinearSwipeType(event); 363 | } 364 | } 365 | 366 | return undefined; 367 | } 368 | 369 | getLinearSwipeType(event: any) { 370 | if (this.eventType !== 'horizontal-swipe' && this.eventType !== 'vertical-swipe') { 371 | const movementX = Math.abs(this.moveLeft(0, event) - this.startX); 372 | const movementY = Math.abs(this.moveTop(0, event) - this.startY); 373 | 374 | if ((movementY * 3) > movementX) { 375 | return 'vertical-swipe'; 376 | } else { 377 | return 'horizontal-swipe'; 378 | } 379 | } else { 380 | return this.eventType; 381 | } 382 | } 383 | 384 | getElementPosition() { 385 | return this.element.getBoundingClientRect(); 386 | } 387 | 388 | getTouchstartPosition(event: any) { 389 | this.startX = event.touches[0].clientX - this.elementPosition.left; 390 | this.startY = event.touches[0].clientY - this.elementPosition.top; 391 | } 392 | 393 | getMousedownPosition(event: any) { 394 | this.startX = event.clientX - this.elementPosition.left; 395 | this.startY = event.clientY - this.elementPosition.top; 396 | } 397 | 398 | moveLeft(index: any, event: any) { 399 | const touches = event.touches; 400 | 401 | if (touches) { 402 | return touches[index].clientX - this.elementPosition.left; 403 | } else { 404 | return event.clientX - this.elementPosition.left; 405 | } 406 | } 407 | 408 | moveTop(index: any, event: any) { 409 | const touches = event.touches; 410 | 411 | if (touches) { 412 | return touches[index].clientY - this.elementPosition.top; 413 | } else { 414 | return event.clientY - this.elementPosition.top; 415 | } 416 | } 417 | 418 | detectTouchScreen() { 419 | var prefixes = ' -webkit- -moz- -o- -ms- '.split(' '); 420 | var mq = function(query: any) { 421 | return window.matchMedia(query).matches; 422 | } 423 | 424 | if (('ontouchstart' in window)) { 425 | return true; 426 | } 427 | 428 | // include the 'heartz' as a way to have a non matching MQ to help terminate the join 429 | // https://git.io/vznFH 430 | var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(''); 431 | return mq(query); 432 | } 433 | 434 | 435 | /* Public properties and methods */ 436 | on(event: EventType, handler: Function) { 437 | if (event) { 438 | this.handlers[event] = handler; 439 | } 440 | } 441 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import {Properties as CarouselProperties} from './interfaces'; 2 | 3 | export class Utils { 4 | 5 | get images() { 6 | return this.carouselProperties.images; 7 | } 8 | 9 | get margin() { 10 | return this.carouselProperties.margin; 11 | } 12 | 13 | get overflowCellsLimit() { 14 | if (this.images && this.isImagesLessCellLimit) { 15 | let overflowCellsLimit = Math.floor((this.images.length - this.numberOfVisibleCells) / 2); 16 | 17 | if (overflowCellsLimit < 0) { 18 | overflowCellsLimit = 0; 19 | } 20 | 21 | return overflowCellsLimit; 22 | } else { 23 | return this.carouselProperties.overflowCellsLimit; 24 | } 25 | } 26 | 27 | get isImagesLessCellLimit() { 28 | return this.carouselProperties.overflowCellsLimit * 2 + this.numberOfVisibleCells > this.images.length; 29 | } 30 | 31 | get numberOfVisibleCells() { 32 | return Math.ceil(this.visibleWidth / this.fullCellWidth); 33 | } 34 | 35 | get visibleCellsOverflowContainer() { 36 | return (this.numberOfVisibleCells * this.fullCellWidth - this.margin) > this.visibleWidth; 37 | } 38 | 39 | get fullCellWidth() { 40 | return this.carouselProperties.cellWidth + this.carouselProperties.margin; 41 | } 42 | 43 | get visibleWidth() { 44 | return this.carouselProperties.visibleWidth || this.carouselProperties!.cellsElement!.parentElement!.clientWidth; 45 | } 46 | 47 | constructor(private carouselProperties: CarouselProperties) { 48 | 49 | } 50 | 51 | updateProperties(carouselProperties: CarouselProperties) { 52 | this.carouselProperties = carouselProperties; 53 | } 54 | 55 | getStartX(event: any) { 56 | const touches = event.touches; 57 | const carouselElementPosition = this.getCarouselElementPosition()['left']; 58 | let startX; 59 | 60 | if (touches) { 61 | startX = touches[0].clientX - carouselElementPosition; 62 | } else { 63 | startX = event.clientX - carouselElementPosition; 64 | } 65 | 66 | return startX; 67 | } 68 | 69 | getMoveX(event: any) { 70 | const touches = event.touches; 71 | const carouselElementPositionX = this.getCarouselElementPosition()['left']; 72 | 73 | if (touches) { 74 | return touches[0].clientX - carouselElementPositionX; 75 | } else { 76 | return event.clientX - carouselElementPositionX; 77 | } 78 | } 79 | 80 | getCarouselElementPosition() { 81 | return this.carouselProperties.hostElement.getBoundingClientRect(); 82 | } 83 | } -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/lib/variables.sass: -------------------------------------------------------------------------------- 1 | //$carousel-counter-font-size: 11px !default 2 | //$carousel-counter-background-color: rgba(23, 37, 68, 0.3) !default 3 | //$carousel-counter-color: #fff !default 4 | //$carousel-counter-top: 8px !default 5 | //$carousel-counter-right: 24px !default 6 | //$carousel-counter-padding: 5px 7px !default 7 | //$carousel-counter-border-radius: 13px !default -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of angular-responsive-carousel 3 | */ 4 | 5 | export * from './lib/carousel.module'; 6 | export * from './lib/carousel.component'; 7 | export * from './lib/interfaces'; 8 | -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/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'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | declare const require: { 12 | context(path: string, deep?: boolean, filter?: RegExp): { 13 | keys(): string[]; 14 | (id: string): T; 15 | }; 16 | }; 17 | 18 | // First, initialize the Angular testing environment. 19 | getTestBed().initTestEnvironment( 20 | BrowserDynamicTestingModule, 21 | platformBrowserDynamicTesting() 22 | ); 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "target": "es2015", 7 | "declaration": true, 8 | "declarationMap": true, 9 | "inlineSources": true, 10 | "types": [], 11 | "lib": [ 12 | "dom", 13 | "es2018" 14 | ] 15 | }, 16 | "exclude": [ 17 | "src/test.ts", 18 | "**/*.spec.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/angular-responsive-carousel/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | 5 | const routes: Routes = []; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forRoot(routes)], 9 | exports: [RouterModule] 10 | }) 11 | export class AppRoutingModule { } 12 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Examples

4 | 5 | 6 |
7 | 10 | 11 |
12 | 13 | 14 |
15 |

Image slider

16 | 24 | 25 |
26 | 27 | 28 |
29 |

HTML content

30 | 31 |
1
32 |
2
33 |
3
34 |
4
35 |
5
36 |
6
37 |
7
38 | 39 |
40 | 41 | 42 |
43 |

width = 410 height = 100

44 | 48 | 49 |
50 | 51 | 52 |
53 |

cellWidth = 100

54 | 57 | 58 |
59 | 60 | 61 |
62 |

cellsToShow = 5

63 | 67 | 68 |
69 | 70 | 71 |
72 |

cellsToScroll = 3

73 | 76 | 77 |
78 | 79 | 80 |
81 |

loop

82 | 85 | 86 |
87 | 88 | 89 |
90 |

lightDOM

91 | 94 | 95 |
96 | 97 | 98 |
99 |

overflowCellsLimit = 2

100 | 104 | 105 |
106 | 107 | 108 |
109 |

freeScroll

110 | 113 | 114 |
115 | 116 | 117 |
118 |

autoplay

119 | 123 | 124 |
125 | 126 | 127 |
128 |

autoplayInterval = 2000

129 | 134 | 135 |
136 | 137 | 138 |
139 |

pauseOnHover = false

140 | 146 | 147 |
148 | 149 | 150 |
151 |

dots = true

152 | 156 | 157 |
158 | 159 | 160 |
161 |

objectFit = contain

162 | 165 | 166 |
167 | 168 | 169 |
170 |

margin = 20

171 | 174 | 175 |
176 | 177 | 178 |
179 |

minSwipeDistance = 50

180 | 183 | 184 |
185 | 186 | 187 |
188 |

transitionDuration = 1000

189 | 192 | 193 |
194 | 195 | 196 |
197 |

transitionTimingFunction = linear

198 | 201 | 202 |
203 | 204 | 205 |
206 |

counter = true

207 | 211 | 212 |
213 | 214 | 215 |
216 |

counterSeparator = of

217 | 222 | 223 |
224 | 225 | 226 |
227 |

borderRadius = 10

228 | 231 | 232 |
233 | 234 | 235 |
236 |

arrows = false

237 | 240 | 241 |
242 | 243 | 244 |
245 |

arrowsOutside = true

246 | 249 | 250 |
251 | 252 | 253 |
254 |

arrowsTheme = dark

255 | 258 | 259 |
260 |
261 |
-------------------------------------------------------------------------------- /src/app/app.component.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/app/app.component.sass -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.debugElement.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'ivySwiperApp'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.debugElement.componentInstance; 26 | expect(app.title).toEqual('ivySwiperApp'); 27 | }); 28 | 29 | it('should render title in a h1 tag', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to ivySwiperApp!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChildren } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.sass'] 7 | }) 8 | 9 | export class AppComponent { 10 | images = [ 11 | {path: '/assets/photo-1548625149-9129dad5eef7.jpg'}, 12 | {path: '/assets/photo-1548625149-d37da68f9a7f.jpg'}, 13 | {path: '/assets/photo-1489365091240-6a18fc761ec2.jpg'}, 14 | {path: '/assets/photo-1547691889-841a6f1c5ca6.jpg'}, 15 | {path: '/assets/photo-1595433562696-a8b1cb8bdad1.jpg'}, 16 | {path: '/assets/photo-1495563381401-ecfbcaaa60f2.jpg'}, 17 | {path: '/assets/photo-1534801022022-6e319a11f249.jpg'}, 18 | {path: '/assets/photo-1524324463413-57e3d8392df1.jpg'}, 19 | {path: '/assets/photo-1506086679524-493c64fdfaa6.jpg'}, 20 | {path: '/assets/photo-1569749450723-1836b067fb64.jpg'} 21 | ]; 22 | 23 | imagesForSlider = [ 24 | {path: '/assets/photo-1444065707204-12decac917e8.jfif'}, 25 | {path: '/assets/photo-1445452916036-9022dfd33aa8.jfif'}, 26 | {path: '/assets/photo-1443996104801-80c82e789b18.jfif'}, 27 | {path: '/assets/photo-1505839673365-e3971f8d9184.jfif'}, 28 | {path: '/assets/photo-1545420333-23a22b18b8fa.jfif'} 29 | ]; 30 | 31 | ngOnInit(){ 32 | 33 | } 34 | 35 | handleCarouselEvents(event:any) { 36 | console.log(event); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { IvyCarouselModule } from 'angular-responsive-carousel'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent 12 | ], 13 | imports: [ 14 | BrowserModule, 15 | AppRoutingModule, 16 | IvyCarouselModule 17 | ], 18 | providers: [], 19 | bootstrap: [AppComponent] 20 | }) 21 | export class AppModule { } 22 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/photo-1443996104801-80c82e789b18.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1443996104801-80c82e789b18.jfif -------------------------------------------------------------------------------- /src/assets/photo-1444065707204-12decac917e8.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1444065707204-12decac917e8.jfif -------------------------------------------------------------------------------- /src/assets/photo-1445452916036-9022dfd33aa8.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1445452916036-9022dfd33aa8.jfif -------------------------------------------------------------------------------- /src/assets/photo-1487819162750-4a48cfbf83b0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1487819162750-4a48cfbf83b0.jpg -------------------------------------------------------------------------------- /src/assets/photo-1489365091240-6a18fc761ec2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1489365091240-6a18fc761ec2.jpg -------------------------------------------------------------------------------- /src/assets/photo-1494391727071-33d8df6f13cf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1494391727071-33d8df6f13cf.jpg -------------------------------------------------------------------------------- /src/assets/photo-1494806812796-244fe51b774d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1494806812796-244fe51b774d.jpg -------------------------------------------------------------------------------- /src/assets/photo-1495563381401-ecfbcaaa60f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1495563381401-ecfbcaaa60f2.jpg -------------------------------------------------------------------------------- /src/assets/photo-1498116535454-8877d66c3b83.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1498116535454-8877d66c3b83.jpg -------------------------------------------------------------------------------- /src/assets/photo-1498116623708-de7137f0d4be.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1498116623708-de7137f0d4be.jpg -------------------------------------------------------------------------------- /src/assets/photo-1505839673365-e3971f8d9184.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1505839673365-e3971f8d9184.jfif -------------------------------------------------------------------------------- /src/assets/photo-1506086679524-493c64fdfaa6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1506086679524-493c64fdfaa6.jpg -------------------------------------------------------------------------------- /src/assets/photo-1524324463413-57e3d8392df1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1524324463413-57e3d8392df1.jpg -------------------------------------------------------------------------------- /src/assets/photo-1534801022022-6e319a11f249.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1534801022022-6e319a11f249.jpg -------------------------------------------------------------------------------- /src/assets/photo-1545420333-23a22b18b8fa.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1545420333-23a22b18b8fa.jfif -------------------------------------------------------------------------------- /src/assets/photo-1547377643-6016a03f3c41.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1547377643-6016a03f3c41.jfif -------------------------------------------------------------------------------- /src/assets/photo-1547691889-841a6f1c5ca6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1547691889-841a6f1c5ca6.jpg -------------------------------------------------------------------------------- /src/assets/photo-1548625149-9129dad5eef7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1548625149-9129dad5eef7.jpg -------------------------------------------------------------------------------- /src/assets/photo-1548625149-d37da68f9a7f.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1548625149-d37da68f9a7f.jpg -------------------------------------------------------------------------------- /src/assets/photo-1569749450723-1836b067fb64.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1569749450723-1836b067fb64.jpg -------------------------------------------------------------------------------- /src/assets/photo-1595433562696-a8b1cb8bdad1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/assets/photo-1595433562696-a8b1cb8bdad1.jpg -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivylaboratory/angular-carousel/c9467bbd20ead6c3e26dec1d4d2f78be9d255ecc/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CarouselNg12App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /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.error(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/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * IE11 requires the following for NgClass support on SVG elements 23 | */ 24 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 25 | 26 | /** 27 | * Web Animations `@angular/platform-browser/animations` 28 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 29 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 30 | */ 31 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 32 | 33 | /** 34 | * By default, zone.js will patch all possible macroTask and DomEvents 35 | * user can disable parts of macroTask/DomEvents patch by setting following flags 36 | * because those flags need to be set before `zone.js` being loaded, and webpack 37 | * will put import in the top of bundle, so user need to create a separate file 38 | * in this directory (for example: zone-flags.ts), and put the following flags 39 | * into that file, and then add the following code before importing zone.js. 40 | * import './zone-flags'; 41 | * 42 | * The flags allowed in zone-flags.ts are listed here. 43 | * 44 | * The following flags will work for all browsers. 45 | * 46 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 47 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 48 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 49 | * 50 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 51 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 52 | * 53 | * (window as any).__Zone_enable_cross_context_check = true; 54 | * 55 | */ 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by default for Angular itself. 59 | */ 60 | import 'zone.js'; // Included with Angular CLI. 61 | 62 | 63 | /*************************************************************************************************** 64 | * APPLICATION IMPORTS 65 | */ 66 | -------------------------------------------------------------------------------- /src/styles.sass: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body 3 | display: block 4 | max-width: 620px 5 | margin: 0 auto 6 | font-family: monospace 7 | overflow-x: hidden 8 | padding: 20px 9 | 10 | h1 11 | font-size: 40px 12 | h2 13 | font-size: 30px 14 | h3 15 | font-size: 20px 16 | 17 | .container 18 | position: relative 19 | 20 | .demo 21 | margin-bottom: 60px 22 | 23 | .carousel-html-content 24 | .carousel-cell 25 | background: aliceblue 26 | display: flex 27 | align-items: center 28 | justify-content: center 29 | font-size: 16px 30 | font-family: sans-serif 31 | border-radius: 15px 32 | 33 | .carousel-cell 34 | border-radius: 15px -------------------------------------------------------------------------------- /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/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "paths": { 6 | "angular-responsive-carousel": [ 7 | "dist/angular-responsive-carousel/angular-responsive-carousel", 8 | "dist/angular-responsive-carousel" 9 | ] 10 | }, 11 | "baseUrl": "./", 12 | "outDir": "./dist/out-tsc", 13 | "forceConsistentCasingInFileNames": true, 14 | "strict": true, 15 | "noImplicitReturns": true, 16 | "noFallthroughCasesInSwitch": true, 17 | "sourceMap": true, 18 | "declaration": false, 19 | "downlevelIteration": true, 20 | "experimentalDecorators": true, 21 | "moduleResolution": "node", 22 | "importHelpers": true, 23 | "target": "es2017", 24 | "module": "es2020", 25 | "lib": [ 26 | "es2018", 27 | "dom" 28 | ] 29 | }, 30 | "angularCompilerOptions": { 31 | "enableI18nLegacyMessageIdFormat": false, 32 | "strictInjectionParameters": true, 33 | "strictInputAccessModifiers": true, 34 | "strictTemplates": true 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | --------------------------------------------------------------------------------