simple jquery pagination

by Shawn Wood

HTML

<ul class="articles">
  <li class="article">Article 1</li>
  <li class="article">Article 2</li>
  <li class="article">Article 3</li>
  <li class="article">Article 4</li>
  <li class="article">Article 5</li>
  <li class="article">Article 6</li>
</ul>
<nav class="pageination">
  <div class="prev">
  <<
  </div>
  <div class="current-page">

  </div>
  <div class="next">
  >>
  </div>
</nav>

CSS

.prev,
.next,
.current-page {
  display: inline-block;
  margin: 0 5px;
  padding: 0 5px;
  font-weight: bold;
}

JavaScript

var articleLimit = 3;
var currentPage = 1;
var $currentPage = $('.current-page');
var $articles = $('.article');
var totalArticles = $articles.length;
var totalPages = (totalArticles / articleLimit);

$articles.hide();
$currentPage.html(currentPage);
changePage();

$('.next').on('click', function(){
	currentPage++;
  if (currentPage > totalPages) {
  	currentPage = 1;
  }
  changePage();
});
$('.prev').on('click', function(){
	currentPage--;
  if (currentPage < 1) {
  	currentPage = totalPages;
  }
  changePage();
});

function changePage() {
	$articles.hide();
  $currentPage.html(currentPage);
  $($articles[currentPage * articleLimit - 1]).show();
  $($articles[currentPage * articleLimit - 2]).show();
}