TA-Pagination - The default configuration

TA-Pagination uses some default values for class names, transition details or breakpoints. You can change these default values very easily.

default: {
    page: 1, // starts at this page: number
    pagination: 1, // mobile first amount of elements shown: number
    duration: 200, // Duration of the transition in ms
    unify: true, // Unify the height of all elements: true | false
    border: false, // Show a border between: true | false
    autoplay: false, // Auto play pagination: true | false
    interval: 5000, // Interval for autoplay mode in ms
    pauseonhover: true, // By default the animation is set to pause mode on hover
    content: 'content', // Reference name for the content wrapper (x-ref)
    navigation: 'navigation', // Reference name for the navigation wrapper (x-ref)
    breakpoints: [ // Default breakpoint configuration - mobile first order
        { width: '768', pagination: '5' },
        { width: '640', pagination: '2' },
    ],
    classAnimation: 'ta-pagination-anim', // Default class name for the animation
    classItem: 'ta-pagination-item', // Default class name for an item
    classBorder: 'ta-pagination-item-border', // Default class name for the border
    classHidden: 'ta-pagination-item-hidden', // Default class name for a hidden item
    classLazy: 'ta-pagination-lazy', // Default class name for a lazy loaded item
},

The way you can overwrite the default configuration is simple. Just hand over your changes to the init function as an object or use data attributes. There is no need for the whole object, just add the definitions you want to change.

If you change the class names you have to define your own styles to get the gallery running. Alternatively you can use the predefined CSS definitions for your own classes.

Overwrite with data attribute

Sometimes it can be easier to read / write if you use data attributes. Since version 2.X you can use the alternative approach and use data attributes to define all options.

<div
    class="ta-pagination ta-pagination-anim-fade"
    :class="{'grid': initialized, 'hidden': !initialized}"
    x-data="taPagination()"
    x-init="init()"
    data-page="1" 
    data-pagination="5"
    data-unify="true"
    data-autoplay="true"
    data-interval="4000"
>
    <!-- CONTENT -->
</div>

Overwrite as object

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="ta-pagination ta-pagination-anim-fade"
    :class="{'grid': initialized, 'hidden': !initialized}"
    x-data="taPagination()"
    x-init="init({
        page: 1,
        pagination: 5,
        unify: true,
        autoplay: true,
        interval: 4000
    })"
>

Define or remove breakpoints

To define different behaviour like pagination element count or specific breakpoints you can add your configuration as a !VALID! JSON object to the data attribute breakpoints - just like this example. The unify attribute is optional.

<div
    class="ta-pagination ta-pagination-anim-fade"
    :class="{'grid': initialized, 'hidden': !initialized}"
    x-data="taPagination()"
    x-init="init()"
    data-breakpoints="[{ "width": "768", "pagination": "3", "unify": "true" },{ "width": "640", "pagination": "2", "unify": "true" }]"
>

Adding your breakpoint configuration to the init method is even easier. See the following example.

<div
    class="ta-pagination ta-pagination-anim-fade"
    :class="{'grid': initialized, 'hidden': !initialized}"
    x-data="taPagination()"
    x-init="init({
        breakpoints: [{ width: '768', pagination: '3', unify: 'true' },{ width: '640', pagination: '2', unify: 'true' }]
    })"
>

To remove the default breakpoint configuration just add an empty value - like this.

<div
    class="ta-pagination ta-pagination-anim-fade"
    :class="{'grid': initialized, 'hidden': !initialized}"
    x-data="taPagination()"
    x-init="init()"
    data-breakpoints=""
>
<div
    class="ta-pagination ta-pagination-anim-fade"
    :class="{'grid': initialized, 'hidden': !initialized}"
    x-data="taPagination()"
    x-init="init({
        breakpoints: ''
    })"
>

Define the minimum height for the pagination

You can define the minimum height very easily by adding a value to the configuration. Alternatively you can define a minimum height for TA-Pagination by using a Tailwind CSS utility like min-h-64 or define your own class and set min-height: 20rem to the value you want.

You can learn more about the minimum height utilities of Tailwind CSS in the official documentation .

Previous Basic Structure Next Predefined CSS

Last updated

17. May 2022

Reading Time

~ 3 minutes

Contents

TA-Pagination - The default configuration

Overwrite with data attribute

Overwrite as object

Define or remove breakpoints

Define the minimum height for the pagination

Plugins & News

Getting started