angular-gallery-slider

Minimal Angular Gallery Slider

What's New

• Responsive gallery
• Bug fixes

Table of contents

• What's New
• Table of contents
• Features
• Demo
  • StackBlitz Demo
• Installation
• Usage
• Available Options
• Versioning
• Future Plan
• Creator
  • Beka Maisuradze
• Ask Me
  • License

Features

• Angular 13 Support
• Responsive gallery
• Smooth sliding with @angular/animations
• Fully reusable component
• Small bundle size

Demo

StackBlitz Demo

• Normal Usage

Installation

angular-gallery-slider is available via npm

Using npm:

$ npm install angular-gallery-slider

Usage

Import AngularGallerySliderModule and BrowserAnimationsModule in the root module(AppModule):

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AngularGallerySliderModule } from  'angular-gallery-slider';

@NgModule({
  imports: [
    // ...
    BrowserAnimationsModule, 
    AngularGallerySliderModule
  ],
})
export class AppModule {}

Template usage example

It is possible to customize slider image using templating. The ngTemplate receives the item as the implicit variable. preview template is used for displaying preview image. item template is used to displaying the slider image item.

<gl-gallery [value]="data" [itemSize]="5">
	<ng-template template="preview" let-data>
		<img src="{{ data.previewImageSource }}" alt="preview"/>
	</ng-template>
	<ng-template template="item" let-data>
		<img src="{{ data.imageSource }}" alt="image" style="block-size: 100px; inline-size: 100px;"/>
	</ng-template>
</gl-gallery>

Available properties

• [value]: An array of objects to display as gallery items.
• [itemSize]: Used for specifying how many number of slider items can be shown in gallery. (Note: the preview image size is automatically calculated based on itemSize and it is recommended to avoid setting custom height or width on a preview image)

Versioning

angular-gallery-slider is maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Future Plan

• Accessibility (keyboard navigation support)
• New properties to have more control over gallery
• Exposing next and prev handlers

Creator

Beka Maisuradze

• @GitHub

Ask Me

• Send me questions on Email

License

MIT license