TA-Pagination major update to version 2

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 .