https://github.com/markusantonwolf/ta-pagination
A light-weight, responsive and mobile first content, image, article and product pagination for every kind of application.
https://github.com/markusantonwolf/ta-pagination
alpine-js alpinejs front-end front-end-development tailwind-css tailwindcss
Last synced: 3 months ago
JSON representation
A light-weight, responsive and mobile first content, image, article and product pagination for every kind of application.
- Host: GitHub
- URL: https://github.com/markusantonwolf/ta-pagination
- Owner: markusantonwolf
- License: mit
- Created: 2020-06-25T07:54:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T09:50:16.000Z (over 3 years ago)
- Last Synced: 2024-09-28T13:42:35.185Z (over 1 year ago)
- Topics: alpine-js, alpinejs, front-end, front-end-development, tailwind-css, tailwindcss
- Language: JavaScript
- Homepage: https://ta-styled-plugins.com/ta-pagination/
- Size: 1.74 MB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **TA-Pagination** - content, article and product pagination
A light-weight, responsive and mobile first content, image, article and product pagination for every kind of application.
## Demos, Documentation and Examples
[Documentation](https://ta-styled-plugins.com/ta-pagination/)
[Getting started](https://ta-styled-plugins.com/ta-pagination/getting-started/)
[Examples](https://ta-styled-plugins.com/ta-pagination/examples/)
[Configuration](https://ta-styled-plugins.com/ta-pagination/configuration/)
## Features
- Paginate every content - Choose every kind of content, image, text, table or list.
- Transitions - You can change the transition for every slide.
- Autoplay mode - Control the pagination the way you want to
- Responsive - Define the pagination based on breakpoints
- Unify heights - Smooth transitions and stable heights of all items
- Based on Alpine JS - Small footprint and Vue JS inspired, like Tailwind for JavaScript
- 100% Tailwind CSS - Rapidly build modern websites without leaving your HTML
## Install
**From npm:** Install the package.
```bash
# Install using npm
npm install --save-dev @markusantonwolf/ta-pagination
# Install using yarn
yarn add -D @markusantonwolf/ta-pagination
```
**Inside tailwind.config.js:** Add the plugin to your tailwind css config file.
```js
// tailwind.config.js
const ta_pagination_safelist = require('./node_modules/@markusantonwolf/ta-pagination/src/plugin/safelist')
module.exports = {
purge: {
// ...
options: {
safelist: [...ta_pagination_safelist],
},
// ...
},
// ...
theme: {
// ...
taPagination: {
animations: ['swing', 'spin', 'swipe', 'fade', 'slide', 'rotate', 'snake', 'window', 'scroll', 'fold'],
animation_default: 'swing', // default value
},
// ...
},
// ...
variants: {
// ...
taPagination: ['responsive'], // default value
extend: {
// ...
},
},
// ...
plugins: [
require('@markusantonwolf/ta-pagination')({
respectPrefix: true, // respect prefix option in config: true (default) | false
respectImportant: true, // respect important option in config: true (default) | false
}),
],
}
```
## All TA StyledPlugins
- [TA-Styled-Plugins](https://ta-styled-plugins.com/) - Explore all Tailwind CSS and Alpine JS styled plugins and learn how to enhance your website fast and easy.
## Local development
```bash
// To install dev dependencies run:
npm install
// To start the development server run and go to http://localhost:8888/:
npm run serve
// To make a development build run:
npm run develop
// To make a production build run:
npm run build
```
## Licence
TA Pagination is released under the [MIT license](https://github.com/markusantonwolf/ta-pagination/blob/master/licence.md) & supports modern environments.
## Copyright
© 2021 Markus A. Wolf
