Slide: Gif

The "Gif" slide let you add easily a gif, like those provided by Giphy, to your presentation.

Table of contents

Layout

My title

Hey

It's a cool gif

0%0/0

Video

Have a look at this video where we demonstrate how to use it!

Installation

This template could be added to your presentation using the following methods.

If you are using our Starter Kit, no need to worry about this, this template is included, therefore you could skip the "Installation" chapter.

From a CDN

It's recommended to use unpkg if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/slide-gif@latest/dist/deckdeckgo-slide-gif/deckdeckgo-slide-gif.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/slide-gif@latest/dist/deckdeckgo-slide-gif/deckdeckgo-slide-gif.js"></script>

From NPM

To install this template in your project from npm run the following command:

npm install @deckdeckgo/slide-gif

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/slide-gif';

Loader

import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-gif/dist/loader'; deckDeckGoSlideElement();

For images too

The slide Gif is useful for Gifs but could be use for any images too, in case you would like for example to display an image fullscreen.

Usage

The "Gif" slide's Web Component could be integrated using the tag <deckgo-slide-gif/>.

<deckgo-slide-gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My gif" fullscreen="true"> <h1 slot="title">My title</h1> <h1 slot="header">Hey</h1> <h2 slot="footer">It's a cool gif</h2> </deckgo-slide-gif>

Slots

The slots title, top and bottom are both optional. top and bottom would be displayed over the gif.

Gif component

The slide "Gif" relies on the component <deckgo-gif/> which is described in the components documentation.

Attributes

This component offers the following options which could be set using attributes:

AttributeTypeDefaultDescription
srcstringThe source url, the src, of the Gif. Could be an embeddable external url or a local one.
altstringAnd alt information could be provided for accessibility reason.
fullscreennumbertrueIf set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen.
custom-backgroundbooleanfalseIf you would provide a background for the all deck and a specific one for this slide, set this option to true
custom-actionsbooleanfalseIf you would provide actions for the all deck and a specific one for this slide, set this option to true

Theming

The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--background
--color
--slide-padding-top16pxPadding top of the all slide
--slide-padding-end32pxPadding right of the all slide
--slide-padding-bottom16pxPadding bottom of the all slide
--slide-padding-start32pxPadding left of the all slide
--zIndex1The z-index of the slide