JSFiddle - React, Tailwind, and code Playground

by fosco

HTML

<div id="test-example1">
    <div class="spp-block-row">Row 1</div>
    <div class="spp-block-row">Row 2</div>
    <div class="spp-block-row">Row 3</div>
    <div class="spp-block-row">Row 4</div>
    <div class="spp-block-row">Row 5</div>
    <div class="spp-block-row">Row 6</div>
</div>

<div id="test-example2">
    <div class="another-row-class">Row 1</div>
    <div class="another-row-class">Row 2</div>
    <div class="another-row-class">Row 3</div>
    <div class="another-row-class">Row 4</div>
    <div class="another-row-class">Row 5</div>
    <div class="another-row-class">Row 6</div>
</div>

<div id="test-example3">
    <div class="another-row-class">Row 1</div>
    <div class="another-row-class">Row 2</div>
    <div class="another-row-class">Row 3</div>
    <div class="another-row-class">Row 4</div>
    <div class="another-row-class">Row 5</div>
    <div class="another-row-class">Row 6</div>
</div>

JavaScript

/**
 * jQuery Simple Page Switcher plugin version: 1.0.1, date: 10/10/2011
 *
 * Copyright (c) 2011 Pavel Voznenko ([email protected])
 * https://github.com/fosco-maestro/Simple-Page-Switcher
 * http://plugins.jquery.com/project/simple-page-switcher
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
(function($, undefined) {
    "use strict";

    /**
     * @param {Object|String|Number} options see method init
     */
    $.fn.simplePageSwitcher = function(options) {
        var settings = {
                'perPage'        : 5,
                'effectDuration' : 'slow',
                'effectFade'     : false,
                'effects'        : false,
                'effectOnStart'  : false,
                'cssClassRow'    : 'spp-block-row',
                'cssClassLeft'   : 'spp-go-left',
                'cssClassRight'  : 'spp-go-right',
                'cssClassFirst'  : 'spp-go-first',
                'cssClassLast'   : 'spp-go-last',
                'cssClassMain'   : 'spp-block',
                'arrowLeft'      : '\u2190',
                'arrowRight'     : '\u2192'
            },
            $this = $(this);
                        
        var methods = {
            /**
             * Init params
             *
             * @param {Object|String|Number} options could be object of settings or if string then assume it class for row
             *                               or if integer - amount of rows per page
             * @returns {boolean}
             */
            'init' : function (options) {
                if (options !== undefined) {
                    switch (typeof options) {
                        case 'object' :
                            $.extend(settings, options);
                            break;
                        case 'string' :
                            settings.cssClassRow = options;
                         ...