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.

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

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

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

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

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