JSFiddle - React, Tailwind, and code Playground

by PeteLopez

HTML

<script src="http://getbootstrap.com/assets/js/holder.js"></script>
<div class="container">
<div id="thumbnails-container" class="row">
</div>
<ul class="pager">
  <li><a href="#" id="prev" class="btn">Previous</a></li>
  <li><a href="#" id="next" class="btn">Next</a></li>
</ul>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

var ThumbnailModule = (function (parent, $) {
    var module = parent || {},
        self = this,
        container = null,
        pageNumber = 1,
        pageSize = 5,
        pageCount = 0,
        thumbnails = [],
        paged = [],
        hasPrev = false,
        hasNext = false,        
        btnPrev = null,
        btnNext = null;

    module.init = function() {
        for(var i = 0; i < 30; i++) {
          thumbnails[i] = 'holder.js/100x100';   
        }  
        container = $('#thumbnails-container');
        btnPrev = $('#prev');
        btnNext = $('#next');
        pageCount = thumbnails.length > 0 ? Math.ceil(thumbnails.length / pageSize) : 0;
        
        btnPrev.on('click', function(e) {
            if(!$(this).hasClass('disabled'))
               module.prev(); 
        });
        
        btnNext.on('click', function(e) {
            if(!$(this).hasClass('disabled'))
               module.next();
        });
        
       module.pagedList(pageNumber);
    };
    
    module.pagedList = function(page) {
        
        hasPrev = page > 1;
		hasNext = page < pageCount;

        if (page <= pageCount && page >= 0) {

            paged = thumbnails.slice((page-1) * pageSize, (page-1) * pageSize + pageSize);
        }
        
        module.render();
    };
    
    module.next = function() {
        pageNumber++;
        module.pagedList(pageNumber);
    };
    
    module.prev = function() {
        pageNumber--;
        module.pagedList(pageNumber);
    };

    module.render = function() {
        container.empty();
        
        btnPrev.toggleClass('disabled', !hasPrev);
        btnNext.toggleClass('disabled', !hasNext);
        
        for (var i = 0; i < paged.length; i++) {
           var img = $('<img class="thumbnail"/>').attr('data-src', paged[i]);
           var thumb = $('<div/>').addClass('col-sm-2').append(img);
           container.append(thumb);
        }
        
        Holder.run();
    };

    return module;
  ...