TA-Gallery - Examples

You can combine all kinds of content in your gallery and on top you can change the animation for every slide - awesome right :-). Enjoy some pictures of Taipei in the spring.

Height by aspect ratio

This example uses a fixed aspect ratio of 16:9 ta-gallery-aspect-hd. Most common ratios are predefined by the Tailwind CSS plugin. Learn more about how to set the size of the gallery in the Functions documentation.

Taiwan 01 spring — BRICK YARD 33 / American Village

Taiwan 02 spring — Jian Guo Weekend Flower Market

Taiwan 03 spring — BRICK YARD 33 / American Village

Taiwan 04 spring — Thermal Valley / Beitou District

Taiwan 05 spring — Thermal Valley / Beitou District

Taiwan 06 spring — Beitou Hot Spring Museum / Beitou District

Taiwan 07 spring — Expo Dome, Yuanshan Park / Zhongshan District

Taiwan 08 spring — Taipei 101 / Xinyi District

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <!--- ADD YOUR SLIDES HERE /-->
</div>

Animate every content - Choose every kind of content, image, text, table or list.

Background image

This example uses a dynamic height defined by a referenz image height. This size gets calculated automatically by adding ta-gallery-size to the base element. To get the size calculated you have to add a reference x-ref=”height” to the image of your choice. The animations were changed to ta-gallery-anim-rotate and a background image and title was added.

Taipei 2021

<div
    class="ta-gallery ta-gallery-size"
    x-data="taGallery()"
    x-init="init()"
>
    <!--- ADD YOUR SLIDES HERE /-->
    <div class="ta-gallery-element ta-gallery-anim-rotate rounded-lg">
        <figure>
            <img
                src="image.jpg"
                alt="Flowers in Taipei"
                class="ta-gallery-image"
                loading="lazy"
                x-ref="height"
            >
            <figcaption class="ta-gallery-image-caption text-sm font-semibold text-white bg-gray-900 bg-opacity-25 bg-blur-2 px-4 py-1">
                Jian Guo Weekend Flower Market
            </figcaption>
          </figure>
    </div>
    <!--- ADD YOUR SLIDES HERE /-->
    <div class="ta-gallery-background">
        <div class="text-3xl font-bold text-gray-900 leading-normal w-2/3 opacity-75">
            Taipei 2021
        </div>
        <img src="background.jpg" alt="" class="ta-gallery-background object-cover opacity-50" loading="lazy">
    </div>
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Supports accessibility - Actions, values and configurations

Auto play

Using autoplay mode is simple in TA-Gallery, just activate autoplay and change the default interval time of 5 sec if you want.

Taipei 2021

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
    data-autoplay="true"
    data-interval="2000"
>
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Autoplay mode is by default paused if a button inside of the gallery does have the focus, you hover over the gallery or you leave the browser window.

Transitions - You can change the transition for every slide.

Mixed content

This example uses a fixed aspect ratio of 14:9 ta-gallery-aspect-modern and some additional text slides with different background colors were added at the end. The gallery starts with slide no. 9 and the background image is replaced by a short description.

The Taipei metropolitan area, which includes the nearby cities of New Taipei and Keelung with a population of 7,047,559 is the 40th most-populous urban area in the world. Roughly one-third of Taiwanese citizens live in this metro district.

In comparison to other Asian cities, Taipei has “excellent” capabilities for managing air quality in the city. It’s rainy climate, location near the coast, and strong environmental regulations have prevented air pollution from becoming a substantial health issue.

Februar impressions Taipei 2021

<div
    class="ta-gallery ta-gallery-aspect-modern"
    x-data="taGallery()"
    x-init="init()"
    data-start="9"
>
    <!--- ADD YOUR SLIDES HERE /-->
    <div class="ta-gallery-element ta-gallery-anim-slide">
        <div class="text-base sm:text-xl font-semibold text-gray-900 leading-relaxed text-center">
        The Taipei metropolitan area, which includes the nearby cities of New Taipei and Keelung with <strong>a population of 7,047,559</strong> is the 40th most-populous urban area in the world. Roughly one-third of Taiwanese citizens live in this metro district.
        </div>
    </div>
    <!--- ADD YOUR SLIDES HERE /-->
    <div class="ta-gallery-background bg-teal-200">
        <div class="text-3xl font-bold text-gray-900 leading-normal w-2/3 opacity-75">
            Februar impressions Taipei 2021
        </div>
    </div>
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

You can use TA-Gallery as a carousel, slide show or image rotator.

Lazy loading

TA-Gallery supports lazy loading out of the box. If you don’t want to rely on the browser attribute loading=”lazy” ( Can I Use ) you can add the class ta-gallery-image-lazy to your elements and add your default loading animation to the src attribute.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <!--- ADD YOUR SLIDES HERE /-->
    <div class="ta-gallery-element ta-gallery-anim-fade">
        <figure>
            <img
                src="loading.svg"
                data-src="image.jpg"
                alt="Flowers in Taipei"
                class="ta-gallery-image ta-gallery-image-lazy"
            >
            <figcaption class="ta-gallery-image-caption">
                BRICK YARD 33 / American Village
            </figcaption>
        </figure>
    </div>
    <!--- ADD YOUR SLIDES HERE /-->
    <!--- ADD YOUR BUTTONS HERE /-->
</div>

Do you want to start?

You can find a fully working example in the Basic Structure documentation.

Previous Getting started Next Basic Structure

Last updated

17. May 2022

Reading Time

~ 5 minutes

Contents