Slides.js

A simple and small library for making slides on web front-end

Features

Controllable
Configurable
Small, lightweight and fast
FOSS library and FOSS licensing (GPLv3)

Setup

Include the slides.js library found in src/index.js

<head>
    <script src="/path/to/slides.js/index.js"></script>
</head>

Create a place for slides

<!-- You can also use any element, including just the body -->
<div id="slides">
    <!-- ... -->
</div>

Add content, any HTML

<!-- You can also use any element, including body -->
<div id="slides">
    <div>
        <h1>Slide 1</h1>
        <div>Content content content</div>
    </div>
</div>

One element is one slide

At the end of your body or whatever, initialise slides

<script>
    init_slides("#slides"); // Pick an element with an ID "slides"
    display_slide(); // Display the first slide
</script>

Add the buttons

<button onclick="display_slide();">Redisplay slide</button>
<button onclick="display_next_slide();">Display next slide</button>
<button onclick="display_prev_slide();">Display previous slide</button>

onclick triggers some JavaScript if a button is clicked

Notes

You can choose when to display the slide with display_slide(), you can do any initial and post-init preparation

Minimal example

See tests/index.html

Configuration

Slides.js is configured though one global object -- SLIDEJS_CFG, it has these keys:

err_style -- The error styling
slide_idx -- Current slide index in the SLIDEJS_SLIDES array
current_slide -- The current slide element

Documentation

This project is built with JSDoc standard documentation

1.7 KiB Raw Permalink Blame History