Add A Slider To You Angular App

Use our core Web Component to add a slider to your application developed with Angular

Photo by Persnickety Prints on Unsplash
Add a slider to your application

Installation

npm i @deckdeckgo/core @deckdeckgo/slide-title --save
npm i @deckdeckgo/types --save-dev

Configuration

import '@deckdeckgo/core';
import '@deckdeckgo/slide-title';
import { defineCustomElements as deckGoCore } from 
'@deckdeckgo/core/dist/loader';
import { defineCustomElements as deckGoSlide } from
'@deckdeckgo/slide-title/dist/loader';
deckGoCore(window);
deckGoSlide(window);
import { BrowserModule } from '@angular/platform-browser';
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Usage

<deckgo-deck>
<deckgo-slide-title>
<h1 slot="title">Add</h1>
</deckgo-slide-title>

<deckgo-slide-title>
<h1 slot="title">a slider</h1>
</deckgo-slide-title>

<deckgo-slide-title>
<h1 slot="title">to your app</h1>
</deckgo-slide-title>
</deckgo-deck>
Our slider is ready

Customization

Hide Pager

<deckgo-deck style="--pager-display: none;">

</deckgo-deck>
Hidden pager

Transition

<deckgo-deck style="--pager-display: none;" transition="fade"></deckgo-deck>
Fade transition

Navigation

<deckgo-deck style="--pager-display: none;" transition="fade"
#deck
(slideNextDidChange)="updateLastSlide()"
(slidePrevDidChange)="updateLastSlide()">
<deckgo-slide-title>
<div slot="title"><h1>Add</h1></div>
</deckgo-slide-title>

<deckgo-slide-title>
<div slot="title"><h1>a slider</h1></div>
</deckgo-slide-title>

<deckgo-slide-title>
<div slot="title"><h1>to your app</h1></div>
</deckgo-slide-title>

</deckgo-deck>

<div style="position: absolute; bottom: 0; right: 0;">
<button (click)="skip()" *ngIf="!lastSlide">Skip</button>
<button (click)="next()">Next</button>
</div>
import {Component, ElementRef, ViewChild} from '@angular/core';

import {defineCustomElements as deckGoCore} from '@deckdeckgo/core/dist/loader';
import {defineCustomElements as deckGoSlide} from '@deckdeckgo/slide-title/dist/loader';

deckGoCore(window);
deckGoSlide(window);

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {

@ViewChild('deck') deck: ElementRef;

lastSlide = false;

async skip() {
console.log('Go to next page');
}

async next() {
const end = await this.deck.nativeElement.isEnd();
if (end) {
await this.skip();
return;
}

await this.deck.nativeElement.slideNext();
}

async updateLastSlide() {
const index = await this.deck.nativeElement.getActiveIndex();
const length = await this.deck.nativeElement.getLength();

this.lastSlide = index === length - 1;
}

}
Navigation with our core

Summary

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store