Question

I’m developing HTML5 application for a tablet. Idea is as follows: app consists of 5 articles, each article has 10 or so slides. Each slide fits perfectly to the screen, and there are left/right buttons to move to the next or previous slide. Also slides might have some jQuery animation, timers set, etc. There is also top-level menu where all articles are listed and user can navigate to them.

So, right now I have 5 html files, each file has 10 DIVs in it, and I have some logic to hide/display divs based on user actions. The requirement is to merge all 5 files into 1 single HTML file. Reason – to make transitions between articles smooth (right now screen blinks – because another HTML file is loaded).

I understand I can go with the same approach as I have now with all these 50 divs – but there will be a lot of code, and it will hard to understand. I’m thinking about making some kind of state machine for transitions between articles/slides:

function changeSlide(bool forward)
{
    disableAnimationForAllSlides();

    var articleNumber = getArticle();
    var currentSlideNumber = getCurrentSlide();

    if (currentSlideNumber == 1 && forward == false)
    {
        goToArticleList();
        return;
    } else if (currentSlideNumber == 10 && forward == true)
    {
        goToArticleList();
        return;
    }
    else
    {
        hideAllSlides();
        displaySlide(articleNumber, currentSlideNumber + 1);
        enableAnimationForSlide(articleNumber, currentSlideNumber + 1);
    }
}

function changeArticle(newArticleNumber)
{
    disableAnimationForAllSlides();
    hideAllSlides();

    displaySlide(newArticleNumber, 1);
    enableAnimationForSlide(newArticleNumber, 1);
}

and I think it’s all relatively straightforward – but I do not want to reinvent the wheel… And of course my case is quite more complicated than this example. So my questions are:

1. What are the standard approaches for this task – having multiple slides in one HTML file with transitions between them? How should I define next/prev elements for example, etc?
2. Is there any libraries/frameworks I can use for this?
3. Is there any example in the internet I can look at?

it’s HTML5/CSS3/jQuery project.

Thank you.

Answer 1

You may want to check out Deck.js

It’s a pretty full featured slide deck built using HTML5 and JavaScript.