JSFiddle - React, Tailwind, and code Playground

by Kaique Covo

HTML

<div id="example">
    <div id="wrap" class="first-page">
        <ul id="book">
            <li><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="Page 6" /></li>
            <li><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="Page 5" /></li>
            <li><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="Page 4" /></li>
            <li><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="Page 3" /></li>
            <li><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="Page 2" /></li>
            <li class="current"><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="Page 1" /></li>
        </ul>

        <a href="#" id="previous">Previous page</a>
        <a href="#" id="next">Next page</a>
    </div>

CSS

#wrap {
            background-image: url("../content/web/fx/pageturn/book.png");
            width: 657px;
            height: 482px;
            margin: 2.5em auto 4em;
            position: relative;
        }

        #book {
            position: relative;
            width: 650px;
            height: 477px;
            margin: 0 auto;
            padding: 0;
            list-style-type: none;
        }

        #book > li {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

        #actions {
            overflow: hidden;
            margin: 0 auto 3em;
            width: 650px;
        }

        #previous, #next {
            text-decoration: none;
            text-indent: -999em;
            overflow: hidden;
            display: block;
            height: 100%;
            width: 90px;
            position: absolute;
            top: 0;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            opacity: .5
        }

        #previous:hover, #next:hover {
            opacity: 1;
        }

        #previous {
            left: 0;
            background-image: url("../content/web/fx/pageturn/arrow-left.png");
        }

        #next {
            right: 0;
            background-image: url("../content/web/fx/pageturn/arrow-right.png");
        }

        .first-page #previous,
        .last-page #next {
            display: none;
        }

JavaScript

function current(page) {
            var book = $("#book"),
                pages = book.children(),
                pagesCount = pages.length,
                current = pages.filter(".current"),
                currentIndex = pagesCount - current.index(),
                newPage;

            if (!arguments.length) {
                return currentIndex;
            }

            if (book.data("animating")) {
                return;
            }

            $("#wrap").toggleClass("first-page", page == 1)
                      .toggleClass("last-page", page == pagesCount);

            if (page != currentIndex) {
                current.removeClass("current");
                newPage = pages.eq(pagesCount - page).addClass("current");

                if (page > currentIndex) {
                    kendo.fx(book).pageturnHorizontal(current, newPage).play();
                } else {
                    kendo.fx(book).pageturnHorizontal(newPage, current).reverse();
                }
            }
        }

        $("#previous").click(function(e) {
            e.preventDefault();
            current(Math.max(1, current() - 1));
        });

        $("#next").click(function(e) {
            e.preventDefault();
            current(Math.min(6, current() + 1));
        });