TA-Pagination

Introduction Getting started

Examples

Basic Structure Configuration Predefined CSS Functions Transitions Tailwind CSS Plugin Links

TA-Styled-Plugins

Introduction The Basic Concept Behind the curtain Browser Support Release Notes TA Helper Plugins

TA-Pagination - Examples

You can combine all kinds of content in your pagination and change the design completely. The only thing you need is a list of elements that can be paginated - awesome right :-). Enjoy some pictures of my hikings around Taipei.

Articles

This example is more like an article style. A list of text and a preview image combined with a “more details” button. This pagination example uses the expand and shrink methods to show all elements in the pagination. Next and previous buttons are shown only if there is a next or previous page.

<div
    class="ta-pagination ta-pagination-anim-swipe"
    x-data="taPagination()"
    x-init="init()"
    :class="{'grid': initialized, 'hidden': !initialized}"
    data-page="1" 
    data-pagination="1"
    data-duration="200"
    data-unify="false"
    data-border="false"
    data-autoplay="false"
    data-interval="2000"
    data-breakpoints="[{ "width": "768", "pagination": "3", "unify": "true" },{ "width": "640", "pagination": "2", "unify": "true" }]"
>
    <div x-ref="content">
        <!--- ADD YOUR ELEMENTS HERE /-->
        <div class="ta-pagination-item">
            <!--- ADD SOME STUFF /-->
        </div>
    </div>
    <div class="ta-pagination-navigation" x-ref="navigation">
        <!--- ADD YOUR NAVIGATION HERE /-->
    </div>
</div>

Cards

Choose a more card style if you want to show all kinds of products your shop might offer in this situation. This example only uses the next and previous methods to navigate through all elements. The navigation in circle mode means you can go forward and backwards in the list of elements.

Juansi Waterfall

Juansi Waterfall is a 3.7 kilometer out and back trail located near Jinshan, New Taipei City, Taiwan that features a …

Juansi Waterfall

Juansi Waterfall is a 3.7 kilometer out and back trail located near Jinshan, New Taipei City, Taiwan that features a …

Juansi Falls Trail

Juansi Waterfall Trail is a 2.1 kilometer moderately trafficked out and back trail located near Beitou, Taipei City, …

Juansi Falls Trail

Juansi Waterfall Trail is a 2.1 kilometer moderately trafficked out and back trail located near Beitou, Taipei City, …

Juansi Falls Trail

Juansi Waterfall Trail is a 2.1 kilometer moderately trafficked out and back trail located near Beitou, Taipei City, …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by …

Jinmianshan Trail

The Jiantanshan Trail (劍潭山親山步道) is a 5 kilometre hike up Jiantanshan, a mountain just to the north of central Taipei. …

Jinmianshan Trail

The Jiantanshan Trail (劍潭山親山步道) is a 5 kilometre hike up Jiantanshan, a mountain just to the north of central Taipei. …

<div
    class="ta-pagination ta-pagination-anim-spin"
    x-data="taPagination()"
    x-init="init()"
    :class="{'grid': initialized, 'hidden': !initialized}"
    data-page="1" 
    data-pagination="2"
    data-unify="false"
>
    <div x-ref="content">
        <!--- ADD YOUR ELEMENTS HERE /-->
        <div class="ta-pagination-item">
            <!--- ADD SOME STUFF /-->
        </div>
    </div>
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="previous()"
        title="Go to previous page"
    >
        previous page
    </button>
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="next()"
        title="Next page"
    >
        Next page
    </button>
</div>

Slider

You can even use a basic slider effect to navigate through all elements. In this example autoplay is activated and the navigation is in circle mode.

<div
    class="ta-pagination ta-pagination-anim-fade"
    x-data="taPagination()"
    x-init="init()"
    :class="{'grid': initialized, 'hidden': !initialized}"
    data-page="1" 
    data-pagination="1"
    data-unify="true"
    data-autoplay="true"
    data-interval="4000"
    data-breakpoints=""
>
    <div x-ref="content">
        <!--- ADD YOUR ELEMENTS HERE /-->
        <div class="ta-pagination-item">
            <!--- ADD SOME STUFF /-->
        </div>
    </div>
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="previous()"
        title="Go to previous page"
    >
        previous page
    </button>
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="next()"
        title="Next page"
    >
        Next page
    </button>
</div>

Circle mode

Both methods next() and previous() and by default in circle mode if you don’t want to have this circle mode you can use the has_previous and has_next property to hide the buttons if there is no next or previous page.

<div
    class="ta-pagination ta-pagination-anim-fade"
    x-data="taPagination()"
    x-init="init()"
>
    <!--- ADD YOUR CONTENT HERE /-->
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="previous()"
        x-show="has_previous"
        title="Go to previous page"
    >
        previous page
    </button>
    <button
        type="button"
        :class="{'opacity-25 cursor-default': animating}"
        x-on:click.prevent="next()"
        x-show="has_next"
        title="Next page"
    >
        Next page
    </button>
</div>

Previous Getting started Next Basic Structure

Last updated

17. May 2022

Reading Time

~ 9 minutes

Contents

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.

Plugins & News

Release Notes TA-Analytics TA-Foodtrucks TA-Pagination TA-YouTube TA-Gallery

Getting started

Behind the curtain Browser Support Error TA Helper Plugins The Basic Concept

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

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

Imprint | Privacy