TA-Gallery - List of all predefined CSS classes

Starting with TA-Gallery is very easy because of the right amount of predefined classes. Learn more about how to use these.

Classes

Having a closer look at the basic example you might recognize the usage of some non Tailwind CSS class names. These classes are used to define some basics to get TA-Gallery running. Additionally the classes are defined to make it easy for you to start with TA-Gallery. If you use the Tailwind CSS Plugin everything is done for you. Here is a list of all defined classes and what they are for.

Only functional definitions are defined in these classes. You can style your gallery as you want to.

ta-gallery

ta-gallery - Used to define some basic stuff and default CSS properties. Use this class on the same level as you alpine directives.

ta-gallery-aspect-XXX

Used on the base level of your component - the same level as ta-youtube - you can define the aspect ratio of your slider. The Tailwind CSS plugin generates utilities for the most common ones. Here is the list of all aspect ratios you can use without adding your own.

ta-gallery-aspect-square: 1:1,
ta-gallery-aspect-movietone: 6:5,
ta-gallery-aspect-large: 5:4,
ta-gallery-aspect-tv: 4:3,
ta-gallery-aspect-academy: 11:8,
ta-gallery-aspect-imax: 1.43:1,
ta-gallery-aspect-classic: 3:2,
ta-gallery-aspect-still: 3:2,
ta-gallery-aspect-modern: 14:9,
ta-gallery-aspect-common: 16:10,
ta-gallery-aspect-golden: 1.618:1,
ta-gallery-aspect-super: 5:3,
ta-gallery-aspect-hd: 16:9,
ta-gallery-aspect-wide: 1.85:1,

Example

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>
    <!-- CONTENT -->
</div>

If you want you can change the size of your slider based on Tailwind CSS breakpoints you can do this as easy as you might expect. Just use the breakpoint prefix you want like sm:ta-gallery-aspect-square and boom -> 🌮.

// tailwind.config.js
module.exports = {
    // ...
    variants: {
        // add more variants like 'hover' or 'focus' to the Tailwind CSS plugin
        taGallery: ['responsive'],
    },
    // ...
}

You can find more details about variants in the official Tailwind CSS documentation . If you want to customize the TA-Gallery Tailwind CSS plugin you should take a look at the Plugin documentation.

ta-gallery-size

ta-gallery-size - Use this class, if you want your slider size to be sized by your content. In the next step you have to add an x-ref="height" attribute to the size giving element. You can use the following options:

height - the height of the element e.g. image will be used for the height of the gallery
width - the width of the element e.g. image will be used for the width of the gallery
size - both height and width of the element e.g. image will be used for the size of the gallery

Example

<div
    class="ta-gallery ta-gallery-size"
    x-data="taGallery()"
    x-init="init()"
>   
    <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"
            >
            <!-- CONTENT -->
          </figure>
    </div>
    <!-- CONTENT -->
</div>

ta-gallery-element

ta-gallery-element - Every slide you want to be part of your gallery should have this class. Adding this class name enables you to add different animations to your slide.

Example

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>   
    <!-- SLIDES -->
    <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">
        <!-- CONTENT -->
        </div>
    </div>
    <!-- SLIDES -->
    <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"
            >
            <!-- CONTENT -->
          </figure>
    </div>
    <!-- SLIDES -->
</div>

You can change the animation for every slide.

ta-gallery-button

ta-gallery-button - To make it easier for you to start with TA-Gallery there are some predefined classes for the gallery navigation buttons. Add this class and format your buttons as you wish.

Example

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>   
    <!-- SLIDES -->
    <button
        type="button"
        class="ta-gallery-button -left-5 sm:left-2 border-2 border-white bg-black bg-opacity-75 text-white rounded-full w-10 h-10 flex items-center justify-center shadow-xl focus:ring focus:ring-primary"
        x-on:click="previous()"
        x-show="loaded"
    >
        <!-- CONTENT -->
    </button>
</div>

ta-gallery-anim-XXX

Add your preferred animation. The default animation is slide and defined in the Tailwind CSS plugin. If you want to change the default animation or customize the Tailwind CSS plugin you should take a look at the Plugin documentation.

You can find more details about all predefined transitions in the Transitions documentation as well as the instructions how to add your own animations to TA-Gallery. Here is a list of all available transitions generated by the Tailwind CSS plugin.

ta-gallery-anim-swing
ta-gallery-anim-slide
ta-gallery-anim-swipe
ta-gallery-anim-rotate
ta-gallery-anim-snake
ta-gallery-anim-window
ta-gallery-anim-scroll

Example

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>   
    <!-- SLIDES -->
    <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">
        <!-- CONTENT -->
        </div>
    </div>
    <!-- SLIDES -->
    <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"
            >
            <!-- CONTENT -->
          </figure>
    </div>
    <!-- SLIDES -->
</div>

ta-gallery-background

ta-gallery-background - If you want to have a background image or text you can use this predefined class. Just add the class to your div tag which is containing your background and everything works fine.

Example

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>   
    <!-- SLIDES -->
    <div class="ta-gallery-background bg-gray-100 flex items-center justify-center">
        <div class="text-3xl font-bold text-gray-900 leading-normal w-2/3 opacity-75">
            Lorem ipsum dolor sit amet
        </div>
    </div>
</div>

Hide with x-cloak

In some HTML tags in the basic structure you might have seen an attribute called x-cloak. This attribute will be removed after Alpine JS has done it’s magic. So with this information you could implement a very easy “hide-before-init” functionality without any issue. Here is a very common way to get this benefit.

/* your css styles */
[x-cloak] {
    display: none;
}

<div
    class="ta-gallery ta-gallery-aspect-hd mb-8"
    x-data="taGallery()"
    x-init="init()"
    data-start="0"
    data-timing="ease-in-out"
    data-duration="0.3s"
>
    <!--- START SLIDES /-->
    <div class="ta-gallery-element ta-gallery-anim-swing rounded-lg" x-cloak>
        <figure>
            <img
                src="https://picsum.photos/800/500?random=1"
                alt="Example Image"
                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"
            >
                Example Image
            </figcaption>
        </figure>
    </div> 
    <!-- CONTENT -->
</div>

Previous Configuration Next Functions

Last updated

17. May 2022

Reading Time

~ 5 minutes

Contents

TA-Gallery - List of all predefined CSS classes

Classes

ta-gallery

ta-gallery-aspect-XXX

ta-gallery-size

ta-gallery-element

ta-gallery-button

ta-gallery-anim-XXX

ta-gallery-background

Hide with x-cloak

Plugins & News

Getting started