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.

Juansi Waterfall

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 …

Juansi Waterfall

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 …

Juansi Falls Trail

Juansi Waterfall Trail is a 2.1 kilometer moderately trafficked out and back trail located near Beitou, Taipei City, Taiwan that features a waterfall and is good for all skill …

Juansi Falls Trail

Juansi Waterfall Trail is a 2.1 kilometer moderately trafficked out and back trail located near Beitou, Taipei City, Taiwan that features a waterfall and is good for all skill …

Juansi Falls Trail

Juansi Waterfall Trail is a 2.1 kilometer moderately trafficked out and back trail located near Beitou, Taipei City, Taiwan that features a waterfall and is good for all skill …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve …

Jinmianshan Trail

The Jiantanshan Trail (劍潭山親山步道) is a 5 kilometre hike up Jiantanshan, a mountain just to the north of central Taipei. Along the way up you’ll see the impressive Grand Hotel Taipei, …

Jinmianshan Trail

The Jiantanshan Trail (劍潭山親山步道) is a 5 kilometre hike up Jiantanshan, a mountain just to the north of central Taipei. Along the way up you’ll see the impressive Grand Hotel Taipei, …

Show all elements
<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.

Juansi Waterfall

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.

Juansi Waterfall

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.

Juansi Falls Trail

Juansi Waterfall Trail is a 2.1 kilometer moderately trafficked out and back trail located near Beitou, Taipei City, Taiwan that features a waterfall and is good for all skill levels. The trail is primarily used for hiking, walking, nature trips, and bird …

Juansi Falls Trail

Juansi Waterfall Trail is a 2.1 kilometer moderately trafficked out and back trail located near Beitou, Taipei City, Taiwan that features a waterfall and is good for all skill levels. The trail is primarily used for hiking, walking, nature trips, and bird …

Juansi Falls Trail

Juansi Waterfall Trail is a 2.1 kilometer moderately trafficked out and back trail located near Beitou, Taipei City, Taiwan that features a waterfall and is good for all skill levels. The trail is primarily used for hiking, walking, nature trips, and bird …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve public safety, there is now a fenced in walkway for part of the trail, as well as …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve public safety, there is now a fenced in walkway for part of the trail, as well as …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve public safety, there is now a fenced in walkway for part of the trail, as well as …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve public safety, there is now a fenced in walkway for part of the trail, as well as …

Qingtiangang Circular Trail

Qingtiangang Grassland was closed for part of 2019 and 2020 following incidents in which visitors were charged by cattle, but as of late 2020, it has been reopened. To improve public safety, there is now a fenced in walkway for part of the trail, as well as …

Jinmianshan Trail

The Jiantanshan Trail (劍潭山親山步道) is a 5 kilometre hike up Jiantanshan, a mountain just to the north of central Taipei. Along the way up you’ll see the impressive Grand Hotel Taipei, pass through thick, dense forest and get excellent views over the capital. It’s …

Jinmianshan Trail

The Jiantanshan Trail (劍潭山親山步道) is a 5 kilometre hike up Jiantanshan, a mountain just to the north of central Taipei. Along the way up you’ll see the impressive Grand Hotel Taipei, pass through thick, dense forest and get excellent views over the capital. It’s …

<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>
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