TA-Gallery - Configuration

TA-Gallery uses some default values for class names and animations details. You can change these default values very easily.

default: {
    item: 'ta-gallery-element', // class name for every slide
    size: 'ta-gallery-size', // class name for the automatic height and width of the gallery
    active: 'ta-gallery-element-active', // class name for the active slide
    lazy: 'ta-gallery-image-lazy', // class name for the lazy loading
    minHeight: '10rem', // Min height definition for the gallery
    start: 0, // If you want to start from a different slide
    duration: '0.3s', // Default animation length
    origin: 'center center', // Default animation origin
    timing: 'ease-in-out', // Default animation timing
    autoplay: false, // Auto play gallery on | off
    interval: 5000, // Interval in ms for autoplay mode
    pauseonhover: true, // By default the animation is set to pause mode on hover
},

The way you can overwrite the default settings is simple. Just hand over your changes to the init function as an object or use data attributes. There is no need for the whole object, just add the definitions you want to change.

If you change the class names you have to define your own styles to get the gallery running. Alternatively you can use the Predefined CSS definitions for your own classes.

Overwrite with data attribute - recommended

The easiest way to update the default configuration is with HTML data attributes. Since version 2.X you can use the alternative approach and use data attributes to define all options.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
    data-item="ta-gallery-element"
    data-size="ta-gallery-size"
    data-active="ta-gallery-element-active"
    data-lazy="ta-gallery-image-lazy"
    data-min-height="10rem"
    data-start="0"
    data-duration="0.3s"
    data-origin="false"
    data-timing="ease-in-out"
    data-autoplay="false"
    data-interval="5000"
    data-pauseonhover="true"
>
    <!-- CONTENT -->
</div>

Alpine.js version 3 support

Since Alpine.js version 3 added with init the first lifecycle hook it is not mandatory anymore to add the init script to the component.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery"
    data-item="ta-gallery-element"
    data-size="ta-gallery-size"
    data-active="ta-gallery-element-active"
    data-lazy="ta-gallery-image-lazy"
    data-min-height="10rem"
    data-start="0"
    data-duration="0.3s"
    data-origin="false"
    data-timing="ease-in-out"
    data-autoplay="false"
    data-interval="5000"
    data-pauseonhover="true"
>
    <!-- CONTENT -->
</div>

Overwrite as object

Deprecated - Will be removed in version 3.x

Another way to overwrite the default configuration is through the init function. Just hand over your changes as an object. There is no need to define the whole configuration, just add the changes you want to have.

<div
    x-data="taGallery()"
    x-init="init({
        item: 'ta-gallery-element',
        size: 'ta-gallery-size',
        active: 'ta-gallery-element-active',
        lazy: 'ta-gallery-image-lazy',
        minHeight: '10rem',
        start: 0,
        duration: false,
        origin: false,
        timing: false,
        autoplay: false,
        interval: 5000,
        pauseonhover: true,
    })"
>

Define the minimum height for the slider

You can define the minimum height very easily by adding a value to the configuration. Alternatively you can define a minimum height for TA-Gallery by using a Tailwind CSS utility like min-h-64 or define your own class and set min-height: 20rem to the value you want.

You can learn more about the minimum height utilities of Tailwind CSS in the official documentation .

Previous Basic Structure Next Predefined CSS

Last updated

17. May 2022

Reading Time

~ 3 minutes

Contents

TA-Gallery - Configuration

Overwrite with data attribute - recommended

Alpine.js version 3 support

Overwrite as object

Define the minimum height for the slider

Plugins & News

Getting started