{"id":13567840,"url":"https://github.com/voxmachina/ng-slideshow","last_synced_at":"2025-07-06T02:39:30.002Z","repository":{"id":65457950,"uuid":"95138525","full_name":"voxmachina/ng-slideshow","owner":"voxmachina","description":"An npm package for an Angular 2+ Slideshow using Redux and Immutable","archived":false,"fork":false,"pushed_at":"2019-02-08T15:03:55.000Z","size":1576,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T01:26:24.489Z","etag":null,"topics":["angular","angular2","angular4","gallery","immutable","redux","slideshow","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/voxmachina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-22T17:08:56.000Z","updated_at":"2021-11-24T12:18:02.000Z","dependencies_parsed_at":"2023-01-24T13:00:18.244Z","dependency_job_id":null,"html_url":"https://github.com/voxmachina/ng-slideshow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxmachina%2Fng-slideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxmachina%2Fng-slideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxmachina%2Fng-slideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voxmachina%2Fng-slideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/voxmachina","download_url":"https://codeload.github.com/voxmachina/ng-slideshow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238418236,"owners_count":19468869,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular4","gallery","immutable","redux","slideshow","typescript"],"created_at":"2024-08-01T13:02:45.567Z","updated_at":"2025-02-12T05:31:26.022Z","avatar_url":"https://github.com/voxmachina.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Angular 2+ Slideshow\n\nA high speed, fluid and consistent image gallery slideshow target for both desktop and mobile.\n\n!['Screenshot'](https://raw.githubusercontent.com/voxmachina/ng-slideshow/master/docs/images/screenshot.jpg)\n\nThere are a lot of slideshow components available on the web, although none of them matched completely my needs and requirements; so I've decided to create one. I needed a fast slideshow that doesn't block anything else occurring in the page, that uses Immutable objects as inputs and only relies on native browser support for animations and that allows for swiping on mobile.\n\nOn top of that, I wanted a slideshow that takes its size from the parent container, so I can easily manipulate it to have a real proper slideshow for different viewports.\n\n**Features**:\n\n- Uses [Immutable](https://facebook.github.io/immutable-js/) objects as inputs thus optimizing Angular change detection mechanism\n- All animations are purely CSS based\n- Supports swipe events for touch devices\n- All animations and slide events occur outside of the Angular zone, thus increasing FPS values\n- All functionality is covered with unit tests\n- Uses images as background images, meaning that the viewport is always the same size for all images\n- By using images as background images it allows the slideshow to grown dynamically according to its parent container\n- Only needs to have a defined height, width can be automatically calculated from the parent container\n- Optionally, a list of thumbnails can be displayed below the main slide for extended navigation\n- Optionally, a dot navigation style is also provided\n\n## Demo\n\nhttp://ng-slideshow.igeni.us/\n\n## Docs\n\nhttps://voxmachina.github.io/ng-slideshow/\n\n## Requirements\n\n[Angular 2+](https://angular.io/)\n\n[NPM](https://www.npmjs.com/get-npm)\n\n[NodeJS](https://nodejs.org)\n\n## Installation\n\n`npm install ng-slideshow --save`\n\n## Usage\n\nImport `SlideshowModule` on your app module:\n\n```javascript\nimport {BrowserModule} from '@angular/platform-browser';\nimport {NgModule} from '@angular/core';\nimport {FormsModule} from '@angular/forms';\nimport {HttpModule} from '@angular/http';\nimport {AppComponent} from './app.component';\nimport {SlideshowModule} from 'ng-slideshow'; // IMPORT THE SLIDESHOW MODULE\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    SlideshowModule, // IMPORT THE SLIDESHOW MODULE\n    BrowserModule,\n    FormsModule,\n    HttpModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n\n```\n\nOn the component specify a list of options and a list of images to display:\n\n```javascript\nimport { Component } from '@angular/core';\nimport * as Immutable from 'immutable';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n  /**\n   * A list of slideshow options\n   *\n   * @type {Map\u003cstring, any\u003e}\n   */\n  options = Immutable.Map({\n    showDots: true,         // Shows a dot navigation component\n    height: 450,            // The initial slideshow height\n    showThumbnails: true,   // Optionally include thumbnails a navigation option\n    thumbnailWidth: 150     // Thumbnail individual width for the thumbnail navigation component\n  });\n\n  /**\n   * A list of images, title is optional, it will be displayed when it's available\n   *\n   * All images should have a url and a title parameter, if you don't\n   * receive the content like this from the server you can always work out something like:\n   *\n   * datasetFromServer.map((imageData) =\u003e {\n   *   imageData.url = imageData.serverUrl;\n   *   imageData.title = imageData.serverTitle;\n   * });\n   * \n   * @type {Immutable.List\u003cany\u003e}\n   */\n  images = Immutable.List([\n    {\n      url: 'http://placekitten.com/800/500',\n      title: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ' +\n      'Lorem Ipsum has been the industrs standard dummy text ever since the 1500s, when an unknown printer ' +\n      'took a galley of type and scrambled it to make a type specimen book.'\n    },\n    {url: 'http://placekitten.com/1200/500'},\n    {url: 'http://placekitten.com/800/300', title: 'cat'},\n    {url: 'http://placekitten.com/300/500', title: 'cat'},\n    {url: 'http://placekitten.com/860/500', title: 'cat'},\n    {url: 'http://placekitten.com/830/500', title: 'cat'},\n    {url: 'http://placekitten.com/660/500', title: 'cat'},\n    {url: 'http://placekitten.com/720/500', title: 'cat'},\n    {url: 'http://placekitten.com/360/300', title: 'cat'},\n    {url: 'http://placekitten.com/860/860', title: 'cat'},\n    {url: 'http://placekitten.com/800/900', title: 'cat'},\n    {url: 'http://placekitten.com/800/1200', title: 'cat'}\n  ]);\n}\n\n```\n\nOn the template include the component:\n\n```html\n\u003ch1\u003eSlideshow Demo\u003c/h1\u003e\n\u003csection\u003e\n  \u003cng-slideshow [options]=\"options\" [images]=\"images\"\u003e\u003c/ng-slideshow\u003e\n\u003c/section\u003e\n```\n\nOn the stylesheet you'll need to define at least the height of your container, width is optional and when not defined it will take 100% and scale accordingly:\n\n```css\nsection {\n  width: 900px; \n  height: 450px;\n}\n```\n\n## Slideshow Options\n\n- `height`: The slideshow needs a defined initial height to be displayed\n\n- `showThumbnails`: Either or not to display the thumbnail navigation\n- `thumbnailWidth`: When using the thumbnail navigation, the thumbnail width must be defined\n- `showDots`: Either or not to show the dots navigation component\n\n## Development\n\nFeel free to participate in the development of this project, any contribution is more than welcome.\n\nIf you take a look at the main root package file, you should see the development tasks needed to get you going.\n\nI've also included, in the source, a demo app component, so you should be able to just run `npm start` to see it live, and see a demo of the slideshow.\n\n## Running unit tests\n\nRun `npm run tests-dev` to execute the unit tests via [Karma](https://karma-runner.github.io), or `npm run tests-ci` to execute the unit tests using a headless Chrome version. \n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoxmachina%2Fng-slideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoxmachina%2Fng-slideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoxmachina%2Fng-slideshow/lists"}