TA-Pagination major update to version 2

The first new feature update since TA-Pagination v1.0 is here and loaded with lots of cool stuff! A new Tailwind CSS plugin, lots of new transitions, some bug fixes and a bunch more.
exclamation
TA-Pagination v2 is a major update. Some methods and all class names have changed.

Here are the new features in detail

Autoplay mode

With the new autoplay mode you can active auto transitions to the next page. All navigation methods are now in circle mode means if you are at the end the next page will be the first one. An interval for the autoplay mode ist optional.

Autoplay is switched to off if the page loses focus and with the new option pauseonhover you can define if the autoplay mode is switched to off if you hover over the component.

<div
    class="ta-pagination ta-pagination-anim-fade"
    x-data="taPagination()"
    x-init="init()"
    data-page="1" 
    data-pagination="5"
    data-autoplay="true"
    data-interval="4000"
>
    <!-- CONTENT -->
</div>

Tailwind CSS plugin

To make it even easier to start with TA-Pagination you can install the plugin now from npm and add it to your tailwind.config.js file. The update comes with a safelist for PurgeCSS too.

// tailwind.config.js

const ta_pagination_safelist = require('./node_modules/@markusantonwolf/ta-pagination/src/plugin/safelist');

module.exports = {
    purge: {
        // ...
        options: {
            safelist: [...ta_pagination_safelist],
        },
        // ...
    },
    // ...
    plugins: [
        // ...
        require('@markusantonwolf/ta-pagination'), // add the TA-Pagination plugin here
        // ...
    ],
};

New transitions

With the new Tailwind CSS plugin you have access to a lot more transitions. Check out the news ones .

Unify element and navigation height

To get rid of some jumping content the new version provides you an option to define the height of all elements and the navigation. This new feature is only working with the prerendered classes from the Tailwind CSS plugin.

The new unify option in working with breakpoints too - but optional.

<div
    class="ta-pagination ta-pagination-anim-fade"
    x-data="taPagination()"
    x-init="init()"
    data-page="1" 
    data-pagination="5"
    data-unify="true"
>
    <!-- CONTENT -->
</div>

Configuration with data attributes

To make configuring even easier I added a new way of updating the default values.

<div
    class="ta-pagination ta-pagination-anim-fade"
    x-data="taPagination()"
    x-init="init()"
    data-page="1" 
    data-pagination="5"
>
    <!-- CONTENT -->
</div>

Explore the updated plugin

You can find the update plugin on GitHub and as CodePen . If you want to learn more about the plugin check out the updated documentation .

TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

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

Imprint | Privacy