Slide: Big Image

If you would like to display a fullscreen image in your presentation and select specific part of it, in order to to zoom in/highlight them, the "Big Image" slide is the one you are looking for.

Table of contents

Layout

0%0/0

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-big-img@latest/dist/deckdeckgo-slide-big-img/deckdeckgo-slide-big-img.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/slide-big-img@latest/dist/deckdeckgo-slide-big-img/deckdeckgo-slide-big-img.js"></script>

From NPM

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

npm install @deckdeckgo/slide-big-img

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-big-img';

Loader

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

Usage

The "Big Image" slide's Web Component could be integrated using the tag <deckgo-slide-big-img/>.

<deckgo-slide-big-img img-src="https://raw.githubusercontent.com/noelmace/deckdeckgo/big-img/webcomponents/slides/big-img/showcase/big-deckdeckgo.jpg" img-divisions="500;1100;1700" axis="y"> </deckgo-slide-big-img>

Slots

The slots title is optional (it is not displayed but could be use for the navigation). Otherwise no particular slots are currently available in order to display additional information on this template.

Attributes

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

AttributeTypeDefaultDescription
img-srcstringAn image URI which should be first displayed full screen before being divided in separate parts presented on the next slides.
img-altstringAn optional accessibility alt for the image.
img-divisionsstringA list of anchors for the divisions of the image (in pixels).
axis'x' or 'y'The axis which should be used to apply the division.
reversebooleanfalseIn which order should the specific part be highlighted.
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
--slide-img-max-widthA maximal width value for the image. Useful in case you would like to display your deck in a container respectively not full window/screen.