Photo by Persnickety Prints on Unsplash
I share one trick a day until the end of the COVID-19 quarantine in Switzerland, April 19th 2020. Nineteen days left until hopefully better days.
The other day I was upgrading the dependencies of one of my client’s application developed with Ionic.
To my surprise, the “fade” transition of the slider wasn’t working anymore. After a bit of digging, I discovered, for performance reason, that the animations had been made optional and had to be solved by copying a piece of code in my application.
Moreover I also had to develop some design changes in its introduction process, which I did but actually not so straight forward as I assumed, as the slides are actually stacked when not displayed.
In short, it worked like a charm but that made me think, did you know that you can actually use the core Web Component of DeckDeckGo, our open source editor for presentations, to add a slider to any web applications developed with or without any modern frontend frameworks?
Probably not 😉.
That’s why I’m going to display in this blog post, as for example, how you can do so in an application developed with Angular.
Add a slider to your application
Installation
For this realization, we are going to need our core. Moreover, because our solution is based on template, we are going to need at least one of them. As we are looking to implement a slider in which we are going to display information, the easiest template to use is our title template which centers the content.
npm i @deckdeckgo/core @deckdeckgo/slide-title --save
Furthermore, it may complains at build time that some type definitions are missing no worries, just add these to your development dependencies.
npm i @deckdeckgo/types --save-dev
Configuration
Once installed we need to import the components. These are developed with StencilJS which provides a handy documentation on the subject.
That being said, Angular won’t resolve the libraries if we only import these as the following.
import "@deckdeckgo/core";
import "@deckdeckgo/slide-title";
That’s why we are using the provided loaders option.
import { defineCustomElements as deckGoCore } from "@deckdeckgo/core/dist/loader";
import { defineCustomElements as deckGoSlide } from "@deckdeckgo/slide-title/dist/loader";
deckGoCore(window);
deckGoSlide(window);
Furthermore, because Angular is not going to recognize our templates, we have to instruct it to support custom schemas. This can be set in any modules or globally in app.module.ts .
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
Our components are installed and configured, we can add the slider which is nothing else that a container <deckgo-deck/> , and its children, the slides, <deckgo-slide-title> .
<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>
And that’s it, the slider is in place 🎉.
Our slider is ready
Customization
You might want to apply some styling to your slide, here are some options.
Hide Pager
A pager is useful for a presentation but most probably not for a slider in an application. That’s why you might want to hide it using the CSS4 variables --pager-display .
<deckgo-deck style="--pager-display: none;"> </deckgo-deck>
Hidden pager
Transition
You might want to use another transition effect. Our core doesn’t handle yet a lot of different animation, Pull Requests are welcomed, but it does already offers a fade effect or none .
<deckgo-deck style="--pager-display: none;" transition="fade"> </deckgo-deck>
Fade transition
Navigation
If we would implement the slide as an introduction to your application, there is a good chance that we would be interested to add a next and a skip buttons. Our core also emits multiple events and exposes navigation methods, let’s try to use these.
For such purpose, we add these two buttons, we are identifying our deck with #deck and are listening to two deck transitions events respectively slideNextDidChange and slidePrevDidChange .
<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>
Finally we implement the related methods while using a ViewChild reference on the deck which exposes the methods we need.
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;
}
}
And that’s it, it works out 😁.
Navigation with our core
Summary
It isn’t our goal to provide the most complete core slider with a zillion options as it would not serve our main focus but, that being said, as you may have noticed, I think it offers a valid alternative to implement quickly a slider in any modern web applications.
If you want to know more about it, check out our documentation or give a try to our editor for your next presentations!
Stay home, stay safe!
David