TA-Gallery major update to version 2

Here are the new features in detail

Autoplay mode

With the new autoplay mode you can active auto transitions to the next slide. All navigation methods are in circle mode means if you are at the end the next page will be the first one. An interval for the autoplay mode ist optional.

Autoplay is switched to off if the page loses focus and with the new option pauseonhover you can define if the autoplay mode is switched to off if you hover over the component.

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

Tailwind CSS plugin

To make it even easier to start with TA-Pagination you can install the plugin now from npm and add it to your tailwind.config.js file. The update comes with a safelist for PurgeCSS too.

// tailwind.config.js

const ta_gallery_safelist = require('./node_modules/@markusantonwolf/ta-gallery/src/plugin/safelist');

module.exports = {
    purge: {
        // ...
        options: {
            safelist: [...ta_gallery_safelist],
        },
        // ...
    },
    // ...
    plugins: [
        // ...
        require('@markusantonwolf/ta-gallery'), // add the TA-Gallery plugin here
        // ...
    ],
};

New transitions

With the new Tailwind CSS plugin you have access to a lot more transitions. Check out the news ones .

New class names

The TA-Gallery class naming convention moved away from BEM to a more Tailwindish style. Class names like gallery__item were replaced with ta-gallery-element.

New min height options

With the new version you can define a min height for the whole gallery as an option.

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

Improved animation features

The duration as much as the transition origin and timing are now changeable as options in the new version.

<div
    class="ta-gallery ta-gallery-aspect-hd"
    x-data="taGallery()"
    x-init="init()"
    data-duration="0.3s"
    data-origin="false"
    data-timing="ease-in-out"
>
    <!-- CONTENT -->
</div>

Configuration with data attributes

To make configuring even easier I added a new way of updating the default values.

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

Explore the updated plugin

You can find the update plugin on GitHub and as CodePen . If you want to learn more about the plugin check out the updated documentation .