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.

exclamation
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

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

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-2022 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy