TA-Pagination - The Basic HTML structure

TA-Pagination is easy to customize. Learn more about the basic structure and how to adapt it to your needs.

Basic structure

This is the basic structure of TA-Pagination. Alpine JS is used to do it’s magic on your webpage. Add TA-Pagination to the x-data directive and initialize the component with the x-init directive. You can add your own navigation or use the predefined navigation bar which comes with the Tailwind CSS plugins. To learn more about the different ways of adding TA-Pagination to your website - check out the How to start documentation and the Tailwind CSS plugin documentation.

Check out the CodePen example of TA-Pagination and play around with it.

<div
    class="ta-pagination ta-pagination-anim-swing mt-6 mb-12 grid"
    x-data="taPagination()"
    x-init="init()"
    :class="{'grid': initialized, 'hidden': !initialized}"
    data-page="1"
    data-pagination="1"
    data-duration="200"
    data-unify="true"
    data-border="true"
    data-autoplay="false"
    data-interval="5000"
    data-breakpoints="[{ "width": "640", "pagination": "2", "unify": "true" }]"
>
    <div
        class="grid gap-24 grid-cols-1 sm:grid-cols-2 overflow-hidden py-8 px-12 min-h-72 border border-gray-50 rounded-lg shadow-lg mb-12"
        x-ref="content">
        <div class="ta-pagination-item flex flex-col items-center">
            <div class="relative w-full h-28 flex-shrink-0 rounded-lg overflow-hidden">
                <img src="/ta-pagination/pagination-01_hu8cd0f7aea7a615d4189b775f66839112_609500_480x180_fill_q20_box_smart1.jpg" alt="" class="absolute inset-0 h-full w-full object-cover object-center" title="Image Title">
            </div>
            <div class="leading-snug flex-grow text-center mt-4">
                <a href="#" class="text-primary">
                    <h2 class="text-xl font-bold mb-2">
                        Juansi Waterfall
                    </h2>
                </a>
                <p class="text-sm font-normal">
                    Juansi Waterfall is a 3.7 kilometer out and back trail located near Jinshan, New Taipei City, Taiwan that features a waterfall and is rated as moderate. The trail is primarily used for hiking, walking, and nature trips.
                </p>
            </div>
        </div>
        <!--- ADD MORE CONTENT HERE /-->
    </div>
    <div class="absolute left-0 inset-y-0 flex items-center justify-center -ml-4 xl:-ml-6">
        <button
            type="button"
            class="text-primary bg-white flex-center rounded-full border-2 border-primary shadow-lg p-1 focus:ring-4 focus:ring-primary focus:ring-offset-0"
            :class="{'opacity-25 cursor-default': animating}"
            x-on:click.prevent="previous()"
            title="Go to previous page"
        >
            <span class="sr-only">Go to previous page</span>
            <!--- ICON /-->
        </button>
    </div>
    <div class="absolute right-0 inset-y-0 flex items-center justify-center -mr-4 xl:-mr-6">
        <button
            type="button"
            class="text-primary bg-white flex-center rounded-full border-2 border-primary shadow-lg p-1 focus:ring-4 focus:ring-primary focus:ring-offset-0"
            :class="{'opacity-25 cursor-default': animating}"
            x-on:click.prevent="next()"
            title="Next page"
        >
            <span class="sr-only">Next page</span>
            <!--- ICON /-->
        </button>
    </div>
</div>

Tailwind CSS

Thanks to Tailwind CSS everything is paired but if you want to run TA-Pagination without Tailwind CSS you might have to remove every class except class names beginning with ta-pagination and define your own classes. The good thing is that with the TA-Pagination Tailwind CSS plugin every relevant class is already defined so it’s up to you how to design it. If you want to customize the Tailwind CSS plugin you should take a look at the documentation page.

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