@markusantonwolf/ta-pagination

    2.0.0 • Public • Published

    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

    Getting started

    Examples

    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.

    # 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.

    // 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 - Explore all Tailwind CSS and Alpine JS styled plugins and learn how to enhance your website fast and easy.

    Local development

    // 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 & supports modern environments.

    Copyright

    © 2021 Markus A. Wolf https://www.markusantonwolf.com

    Install

    npm i @markusantonwolf/ta-pagination

    DownloadsWeekly Downloads

    4

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    720 kB

    Total Files

    47

    Last publish

    Collaborators

    • markusantonwolf