TA-Gallery - Image, content and text slider component

Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa animi laborum, consequuntur excepturi optio ad quidem illum? Esse deserunt dolore adipisci, nesciunt totam nam, voluptates dolorem ea quam voluptatibus at obcaecati.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa animi laborum, consequuntur excepturi optio ad quidem illum? Esse deserunt dolore adipisci, nesciunt totam nam, voluptates dolorem ea quam voluptatibus at obcaecati.

Bavarian food in Taipei

TA-Gallery component is designed to fit in every project, in every grid and in every flexbox layout. Thanks to Tailwind CSS everything is customizable and it is very easy to add your own animation to TA-Gallery if you want to. If you are familiar with Tailwind CSS and Alpine JS you might consider using TA-Gallery. so try it out and if you have some feedback - leave me a message: @markusantonwolf / Twitter.

Features

Animate every content - Choose every kind of content, image, text, table or list.

Transitions - You can change the transition for every slide.

Autoplay mode - Control the gallery the way you want to

Supports accessibility - Actions, values and configurations

Based on Alpine JS - Small footprint and Vue JS inspired, like Tailwind for JavaScript

100% Tailwind CSS - Rapidly build modern websites without leaving your HTML

See TA-Gallery component in action

If you are using TA-Gallery in the wild and want to see it in the following list just send me a DM on Twitter ( @markusantonwolf ) or mention me in a tweet.

Portfolio Markus A. Wolf | Work

As flexible as possible

TA-Gallery component is designed to be as light as possible so it uses its own CSS classes only for mandatory definitions. Any visual designs are based on Tailwind CSS utilities so you can adopt it to your needs very easily. Because TA-Gallery is reduced to the max you can use the code together with your own Alpine JS scripts. I recommend using Tailwind CSS and Alpine JS together with PostCSS, Webpack or Gulp.