slideshow 0.1.2

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.

    <div id="test" class="slideshow">
        <div class="slides">
            <ul>
                <li class="active">
                    <img src="img/test-1-scaled.jpg" />
                    <div class="caption">First test</div>
                </li>
                <li>
                    <img src="img/test-2-scaled.jpg" />
                    <div class="caption">Second test</div>
                </li>
                <li>
                    <img src="img/test-3-scaled.jpg" />
                    <div class="caption">Third test</div>
                </li>
            </ul>
            <div class="controls">
                <a class="arrow-left" href="#">&lt;</a>
                <a class="arrow-right" href="#">&gt;</a>
            </div>
            <div class="bullets">
            </div>
        </div>
    </div>

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"));