JSFiddle - React, Tailwind, and code Playground

by bvotcode

HTML

<div class="img-list">
    <img src="" alt="1" />
    <img src="" alt="2" />
    <img src="" alt="3" />
    <img src="" alt="4" />
    <img src="" alt="5" />
    <img src="" alt="6" />
    <img src="" alt="7" />
    <img src="" alt="8" />
    <img src="" alt="9" />
    <img src="" alt="10" />
    <img src="" alt="11" />
    <img src="" alt="12" />
</div>

<div class="pagination">
  <a href="#" class="prev">Page 1</a>
  <a href="#" class="next">Page 2</a>
  <a href="#" class="next">Page 3</a>
</div>

CSS

.img-list, .pagination
{
  float: left;
  clear:both;
  display: block;
}

.img-list img {
 float: left;
}

.img-list img:nth-child(4n-1) {
 clear:both;
}

JavaScript 1.7

var start = 0;
var nb = 4;
var end = start + nb;
var length = $('.img-list img').length;
var list = $('.img-list img');

list.hide().filter(':lt('+(end)+')').show();


$('.prev, .next').click(function(e){
  e.preventDefault();

  if (($(this).hasClass('prev') && start > 0) || ($(this).hasClass('next') && end < length))
  {

    if( $(this).hasClass('prev') ){
      start -= nb;
    } else {
      start += nb;
    }

    end = start + nb;
	
  	if((start/nb) < 1)
    {
      $('a.prev').html('Page 1');
    }
    else
    {
      $('a.prev').html('Page '+(start/nb));
    }
    

    if(end+nb > length) {
      $('a.next').html('Page '+((end/nb)));
    } else {
      $('a.next').html('Page '+((end/nb)+1));
    }
  }

  if( start == 0 ) list.hide().filter(':lt('+(end)+')').show();
  else list.hide().filter(':lt('+(end)+'):gt('+(start-1)+')').show();
});