slideshow 0.1.0

Slideshows for Dart

Synopsis

This component allows for uncomplicated creation of slideshows in Dart.

How to use

Create slideshow skeleton

A slideshow must respect the following structure:

• have a general slideshow container (#test below).

• the slides must themselves be contained by an element, typically a div element (.slides below).

• each slide absolutely must be an li element and thus contained by an ul element (see li elements below).

• optional: specify two elements with the classes arrow-left and arrow-right, if you would like the user to control navigation of the slideshow.

• optional: specify an element with class bullets if you would like the slideshow to show a number of bullets equal to the number of slides, which the user can click on to move instantly to an intended slide.

  • [img/test-1-scaled.jpg]
    First test
  • [img/test-2-scaled.jpg]
    Second test
  • [img/test-3-scaled.jpg]
    Third test

  < >

In addition, Slideshows require very specific CSS styling to be fully functional. Have a look at the included examples for a general understanding of this.

Instantiating a slideshow

Import the main source file:

import 'package:slideshow/slideshow.dart';

Then you have to make sure you are importing the source file of the transition you intend to use. If you wanted to use the simple transition, then:

import 'package:slideshow/transition_simple.dart';

Then it is only a matter of instantiating the actual slideshow:

final Slideshow test = new Slideshow(
  document.body.querySelector("#test"),
  new TransitionSimple());

Default values

If duration is not specified, the default duration of 2 seconds will be assumed.

Events

There are two events dispatched by Slideshow instances:

• changing: triggered as the transition to another slide begins. An argument containing the index of the slide is passed.
• change: dispatched right after the transition started with changing above ends.

Listening to events is easy, as illustrated by the following snippet:

new Slideshow(node, new TransitionSimple())
  .on.change(() => print("Slide changed"));