https://github.com/markusantonwolf/ta-gallery
You can use the light-weight, responsive and mobile first gallery, carousel, slide show or rotator for images, texts and every kind of content.
https://github.com/markusantonwolf/ta-gallery
alpine-js alpinejs front-end front-end-development tailwind-css tailwindcss
Last synced: about 1 month ago
JSON representation
You can use the light-weight, responsive and mobile first gallery, carousel, slide show or rotator for images, texts and every kind of content.
- Host: GitHub
- URL: https://github.com/markusantonwolf/ta-gallery
- Owner: markusantonwolf
- License: mit
- Created: 2020-04-27T05:36:15.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-02T11:18:21.000Z (about 2 years ago)
- Last Synced: 2025-05-03T15:11:53.069Z (about 2 months ago)
- Topics: alpine-js, alpinejs, front-end, front-end-development, tailwind-css, tailwindcss
- Language: JavaScript
- Homepage: https://ta-styled-plugins.com/ta-gallery/
- Size: 1.42 MB
- Stars: 102
- Watchers: 3
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **TA-Gallery** - Image, content and text slider
**You can use the light-weight, responsive and mobile first gallery, carousel, slide show or rotator for images, texts and every kind of content.**
## Demos, Documentation and Examples
[Documentation](https://ta-styled-plugins.com/ta-gallery/)
[Getting started](https://ta-styled-plugins.com/ta-gallery/getting-started/)
[Examples](https://ta-styled-plugins.com/ta-gallery/examples/)
[Configuration](https://ta-styled-plugins.com/ta-gallery/configuration/)
[Tailwind CSS plugin](https://ta-styled-plugins.com/ta-gallery/tailwind-css-plugin/)
## 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
## Install
**From npm:** Install the package.
```bash
# Install using npm
npm install --save-dev @markusantonwolf/ta-gallery
# Install using yarn
yarn add -D @markusantonwolf/ta-gallery
```
**Inside tailwind.config.js:** Add the plugin to your tailwind css config file.
```js
// tailwind.config.js
const ta_gallery_safelist = require('./node_modules/@markusantonwolf/ta-gallery/src/plugin/safelist')
module.exports = {
purge: {
// ...
options: {
safelist: [...ta_gallery_safelist],
},
// ...
},
// ...
theme: {
// ...
taGallery: {
animations: ['swing', 'swipe', 'slide', 'rotate', 'snake', 'window', 'scroll', 'fade', 'dynamic'],
animation_default: 'slide', // default value
aspect_ratios: [
// all aspect ratios
'square',
'movietone',
'large',
'tv',
'academy',
'imax',
'classic',
'still',
'modern',
'common',
'golden',
'super',
'hd',
'wide',
{
instagram: 3 / 5, // add your own aspect ratio
},
],
},
// ...
},
// ...
variants: {
// ...
taGallery: ['responsive'], // default value
extend: {
// ...
},
},
// ...
plugins: [
require('@markusantonwolf/ta-gallery')({
respectPrefix: true, // respect prefix option in config: true (default) | false
respectImportant: true, // respect important option in config: true (default) | false
}),
],
}
```
## More TA-Styled-Plugins
- [TA-Styled-Plugins](https://ta-styled-plugins.com/) - Explore all Tailwind CSS and Alpine JS styled plugins and learn how to enhance your website fast and easy.
## Local development
```bash
// To install dev dependencies run:
npm install
// To start the development server run and go to http://localhost:8888/:
npm run serve
// To make a development build run:
npm run develop
// To make a production build run:
npm run build
```
## Licence
TA-Gallery is released under the [MIT license](https://github.com/markusantonwolf/ta-gallery/blob/master/licence.md) & supports modern environments.
## Copyright
© 2021 Markus A. Wolf
