TA-Gallery - All functions and values

Functions

next() : Function - Jumps to the next slide based on the slide index. If the actual slide is the last one the next slide will be the first one. The function circles through all slides.

previous() : Function - Jumps to the previous slide based on the slide index. If the actual slide is the first one the previous slide will be the last one. The function circles through all slides.

stop() : Function - If your gallery is in autoplay mode you can stop the animation completely. This functionality is important if you plan to use TA-Gallery in an accessibility context.

pause() : Function If your gallery is in autoplay mode you can pause the animation. This functionality is important if you plan to use TA-Gallery in an accessibility context.

resume() : Function If your gallery is in autoplay mode you can resume the animation. This functionality is important if you plan to use TA-Gallery in an accessibility context.

Example

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
>   
    <!-- SLIDES -->
    <button
        type="button"
        class="ta-gallery-button"
        x-on:click="previous()"
        x-show="loaded"
    >
        <!-- CONTENT -->
    </button>
    <button
        type="button"
        class="ta-gallery-button"
        x-on:click="next()"
        x-show="loaded"
    >
        <!-- CONTENT -->
    </button>
</div>

Values

TA-Gallery provides you with the following values you can use to improve the user experience.

previous_slide : Number - Gives you the previous slide index. The slide index starts at 0.

active_slide : Number - Gives you the active slide index. The slide index starts at 0.

next_slide : Number - Gives you the previous slide index. The slide index starts at 0.

loaded : Boolean - If all lazy loaded images are loaded.

autoplay : Boolean - This value changes if the gallery is in autoplay mode. Depending on the user action it might contain true if the autoplay mode is on and false if the autoplay mode is off or paused.

How to set the size of the gallery

You can use two different types of defining the height of the gallery. You can use one of the predefined aspect ratio classes or you can define the size dynamically by one or more slide dimensions.

Size by aspect ratio

Just add your preferred aspect ratio class to the base level - the same level as ta-youtube - and boom -> 🌮. You can find all predefined aspect ratios under the heading Predefined CSS .

Size by slide dimensions

If you prefer to define the dimensions of your gallery by one slide or maybe the background you can add ta-gallery-size class to the gallery element (same as the ta-gallery class) and add x-ref=”size” to the slide or background image -> 🌮. You can find out more about all options of the x-ref attribute in the Predefined CSS documentation.