Logo TA Pagination

A light-weight (6,5kB), responsive and mobile first content, article and product pagination based on Tailwind CSS and Alpine JS.

Move Flip Room Snake Swipe Window

(Choose your favorite animation style and see the magic happening.)

100% customizable and endless animation options. If you already use Tailwind CSS and Alpine JS in your project you might consider using this content, article and product pagination.

Use TA-Pagination as a part of your Tailwind CSS and Alpine JS project. You can use it as a stand alone version but it works best together with your own scripts and enhancements. The pagination is designed to fit in every project, in every grid and in every flexbox based design. So please try TA-Pagination and if you have some feedback - here you go.

Github Download Author Feedback

How to use TA-Pagination

The fastest way to start using Tailwind CSS and Alpine JS is from a CDN. Put the link into your head section of your html source code. Please be sure you use the "defer" attribute in your script tag. This attribute makes sure that the code gets executed right after loading.

  
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="/dist/css/pagination.css" rel="stylesheet">
<link href="/dist/css/pagination-keyframes-move.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>  

Then add the pagination script source to the bottom of your body tag. You can download TA-Pagination from Github and use the files from the /dist folder. To change the animations use a different CSS file e.g. “pagination-keyframes-flip.css”.

  
    <script src="/dist/js/pagination.js"></script>  

As light as possible

TA-Pagination is designed to be as light as possible so it uses CSS only for the mandatory definitions. Any design options are done with Tailwind CSS so you can adopt it to your needs very easily. Because TA-Pagination is reduced to the max you can use the code together with your own Alpine JS scripts. I recommend using Tailwind CSS and Alpine JS together with PostCSS, Webpack or Gulp so you can get the most out of the amazing Frameworks Tailwind CSS and Alpine JS.

Design only

All these CSS classes are used to design the pagination - there is NO need for mandatory classes. All important parts are defined with “x-refs” in Alpine JS. So you see, TA-Pagination is easy to use and thanks to Tailwind CSS extremely flexible.

  
    .pagination {}
.pagination__item {}
.pagination__image {}
.pagination__lazy {}
.pagination__content {}
.pagination__link {}
.pagination__navigation {}  

The default class names

TA-Pagination uses default class names which you can overwrite easily. To explain more about the default definition I added some helpful comments.

  
    default: {
      page: 1, // starting with the first page
      pagination: 5, // default amout of shown content elements
      content: 'content', // x-ref name for the content
      navigation: 'navigation', // x-ref name for the navigation
      item: 'pagination__item', // define the content element if not found childrens will be used
      animation: 'pagination__anim', // prefix for animations
      hidden: 'pagination__item--hidden', // default class name for hidden elements
      visible: 'pagination__item--visible', // default class name for visible elements
      lazy: 'pagination__lazy', // if you what to use lazy loading
      breakpoints: [
        { 
          width: '640', // breakpoint "<" viewport width in px
          pagination: '1' // below the breakpoint it changes pagination to this definition
        },
        {
          width: '768',
          pagination: '2'
        },
      ],
    },  

The way you can overwrite the default settings is simple. Just hand over your new defaults to the init function as an object. There is no need for the whole object, just add the definitions you want to change.

  
    <div
  class="mt-6 hidden"
  x-data="pagination()"
  x-init="init({
    page: 1,
    pagination: 3,
    breakpoints: [
      { 
        width: '640',
        pagination: '1'
      },
      { 
        width: '1024',
        pagination: '2'
      }
    ],
  })"
>  

CSS custom properties

Define the height of alle content elements evenly with TA-Pagination. You can use the defined CSS custom properties to get the maximum height of all the content elements inside the pagination and the height of the navigation. You can use it to define the height of the pagination__item so you get a great experience while going back and forth in the navigation. There will be no jumping in the height of the pagination and navigation and this is a perfect user experience

  
    .pagination__item {
  height: var(--content-height);
}
.pagination__navigation {
  height: var(--navigation-height);
}  

Basic structure of TA-Pagination

This is the basic structure of the pagination. Alpine JS is used to define the object (x-data) and init (x-init) the date. Use the pagination script form the /dist/js/pagination.js file in every project you want to. If you want to hide all elements that aren't on the first page you can use pagination__item--hidden to hide all.

  
    <div x-data="pagination()" x-init="init()">
  <div class="pagination" x-ref="content">
    // Content
    <div class="pagination__item pagination__anim">
      // Element
    </div>
    // Add more content elements here
  </div>
  <div class="pagination__navigation" x-ref="navigation">
  // Perfect place for your navigation
  </div>
</div>  

Navigation

The great thing about TA-Pagination is that you can define the navigation however you want. There is NO mandatory structure you have to use - you can use your own layout. Thanks to Alpine JS you can handle going to the next page, the last page or even expanding all content elements with TA-Pagination functions. There are a lot of properties e.g. to show and hide navigation elements - even if you want to hide the whole navigation while animating there is a property for that.

  
    <div x-ref="navigation" class="pagination__navigation">
  <a
    x-on:click.prevent="start()"
    x-show="has_previous"
    href="expand-all">
      start
  </a>
  <a
    x-on:click.prevent="previous()"
    x-show="has_previous"
    href="previous-page">
      previous
  </a>
  <a
    x-on:click.prevent="expand()"
    x-show="is_shrink"
    href="expand-all">
      shrink
  </a>
  <a
    x-on:click.prevent="shrink()"
    x-show="is_expand"
    href="expand-all">
      expand
  </a>
  <a
    x-on:click.prevent="next()"
    x-show="has_next"
    href="next-page">
      next
  </a>
  <a
    x-on:click.prevent="end()"
    x-show="has_next"
    href="expand-all">
      end
  </a>
</div>  

The List of all properties and functions TA-Pagination provides you with.

  
    properties: {
    initialized: false, // true when the pagination is initialized
    is_expand: false, // if the expand function is available
    is_shrink: false, // if the shrink function is available
    has_next: false, // if there is a next page
    has_previous: false, // if there is a previous page
    animating: false, // if there is an animation going on
  }
  
  // functions
  next() // go to the next page
  end() // go to the last page
  previous() // go to the prvious page
  start() // go to the first page
  expand() // show all content elements
  shrink() // go back to the defined page and pagination  

Links to used sources

Alpine JS is a very easy to use and extremely light-weight JS Framework. You can say it is an "reduced" Vue JS so if you love Vue JS than this might be the right choice if you don't need the whole functionality for smaller functionalities.

Tailwind CSS is a highly customizable, low-level CSS framework and it delivers in combination with PostCSS and Purge extremely small CSS files.

Picsum Photos is an awesome "Lorem Pixum" service and quite fast.

Why Tailwind CSS is my CSS framework of choice

Logo TA StyledPLUGINS

TA StyledPLUGINS stands for light-weight, responsive and mobile first. All plugins are based on Tailwind CSS and Alpine JS. All are 100% customizable with endless animation options.

TA-Pagination - A content pagination solution.

TA-Gallery - An image gallery with endless animation options.

TA-YouTube - A YouTube video wrapper with auto playback, aspect ratio and privacy settings.

Copyright © 2019-2020 Markus A. Wolf - www.markusantonwolf.com

IMPRINT | PRIVACY

TA-Pagination is licensed under the MIT license, see LICENSE for details.