core: loop

[peterpeterparker]

Affected part of DeckDeckGo

• [X] Web Components

Feature Description

It would be cool to have the ability to loop the presentation.

With loop I mean that when the last slide is displayed, the next slide should be again the first one. Moreover, it should give the feeling that it is a loop, therefore the effect should be a normal animation to next slide and not a jump to first slide.

Side note

Together with #890 (auto-slide) it will then possible to have a showcase mode for presentations build with DeckDeckGo.

Get started

This feature has to be developed in the core Web Component

git clone https://github.com/deckgo/deckdeckgo
cd deckdeckgo/webcomponents/core
npm i
npm run start

Property

I guess we can add a new Property loop

@Prop()
loop: boolean = false;

Solution

Spontaneously I would say that the solution for this is probably moving the order of the slides provided as slots to the deck in the DOM.

Something like (pseudo-code)

const slideToMove: HTMLElement = this.el.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
const lastSlide: HTMLElement = ...; // find last slide
// append slideToMove after last slide

Note that the slide has to be moved explicitly after last slide because the deck can contains other elements after the slides, such as background, and we should not mixup the ordering.

Get Started

If you need help to get started with this feature, I'll be happy to help.

Ping me: @peterpeterparker | twitter | email | slack

[adriens]

Thanks for having taken this in account 👍

[adriens]

Here is some inspiration from Reveal.js : https://stackoverflow.com/questions/24809752/randomize-slides-in-reveal-js

Reveal.initialize({
    controls: false,    // hide the control arrows
    progress: false,    // hide the progress bar
    history: false,     // don't add each slide to browser history
    loop: true,         // loop back to the beginning after last slide
    transition: fade,   // fade between slides
    autoSlide: 5000,    // advance automatically after 5000 ms
});

and then the random :

Reveal.initialize({ shuffle: true });

[peterpeterparker]

Updated the description and listed the task for "hacktoberfest 2020"

[peterpeterparker]

Auto slide has now been added to our core, therefore part of the "Showcase" is not there 😉.

[adriens]

Thanks for having made #890 become a reality 👏 🙏

[TheIllusionistMirage]

Hi @peterpeterparker I would like to work on this.

[peterpeterparker]

Thx @TheIllusionistMirage. Assigned 👍