Git Product home page Git Product logo

ta-gallery's Introduction

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

ta-gallery's People

Contributors

markusantonwolf avatar saulens22 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.