Nostalgic Punchcard Missing

    @markusantonwolf/ta-gallery

    2.2.0 • Public • Published

    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

    Getting started

    Examples

    Configuration

    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.

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

    // 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 - Explore all Tailwind CSS and Alpine JS styled plugins and learn how to enhance your website fast and easy.

    Local development

    // 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 & supports modern environments.

    Copyright

    © 2021 Markus A. Wolf https://www.markusantonwolf.com

    Install

    npm i @markusantonwolf/ta-gallery

    DownloadsWeekly Downloads

    352

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    10.3 MB

    Total Files

    62

    Last publish

    Collaborators

    • markusantonwolf