@monster_property_services/monster-logo-showcase

Monster Logo showcase 📸

This web component showcase a list of logos with an infinite animation of scrolling.

Installation 📦️

You can start using this component right away like this:

1. CDN

<script type="module" src="https://unpkg.com/@monster_property_services/monster-logo-showcase@1.0.5"></script>

1. npm

npm i @monster_property_services/monster-logo-showcase

The image object has 4 optional properties looks like this

    {
        "src": "public link of the image",
        "alt": "alt of the image",
        "link": "external link to redirect on click event",
        "caption": "text to display on tooltip"
    }

The web component has a input property called images of an JSON object with and array listing the list of images.

For example:

[
    {"src": "https://cdn.freebiesupply.com/logos/thumbs/2x/mcdonalds-black-logo.png","alt": "McDonalds"},
    {"src": "https://cdn.freebiesupply.com/images/large/2x/starbucks-logo-black-and-white.png","alt": "starbucks"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/general-electric-black-logo-png-transparent.png","alt": "general-electric"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/nfl-logo-png-transparent.png","alt": "nfl"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/mercedes-benz-6-logo-png-transparent.png","alt": "mercedes-benz"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/hogwarts-logo-png-transparent.png","alt": "hogwarts"},
    {"src": "https://cdn.freebiesupply.com/logos/thumbs/2x/mcdonalds-black-logo.png","alt": "McDonalds"},
    {"src": "https://cdn.freebiesupply.com/images/large/2x/starbucks-logo-black-and-white.png","alt": "starbucks"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/general-electric-black-logo-png-transparent.png","alt": "general-electric"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/nfl-logo-png-transparent.png","alt": "nfl"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/mercedes-benz-6-logo-png-transparent.png","alt": "mercedes-benz"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/hogwarts-logo-png-transparent.png","alt": "hogwarts"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/nfl-logo-png-transparent.png","alt": "nfl"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/mercedes-benz-6-logo-png-transparent.png","alt": "mercedes-benz"},
    {"src": "https://cdn.freebiesupply.com/logos/large/2x/mercedes-benz-6-logo-png-transparent.png","alt": "mercedes-benz"}
]

Using the web component 🏗️:

<monster-logo-showcase images="your_json_data"></monster-logo-showcase>

Preview: You can see an example of this web component in here ✨: https://codepen.io/Andres2D/pen/XWwNjJb?editors=1000