## Here is banner demo

It will change source depending on screen reslution. It saves data, dynamically adding source, downloading proper image on proper device.

ResponsiveBanner class is managing sizes array and gives you methods to change them how you like. You can do it manually, add new sources and trigger them. TODO: Write feature for auto detect data attribute sources, write feature to auto change them according to resolution

### Methods

    interface IResponsiveBanner {
        setSize(sizeName: string): void;
        getCurrentSize(): string;
        addNewSource(name: string, size: ISize): void;
    }

    interface ISize {
        sourceUrl: string;
    }

### Settings

By default class needs only banner $ element. It will find img tag inside to change its src. You can overwrite its selector manually in constructor

    constructor($element: JQuery, settings?: IResponsiveBannerSettings)

    interface IResponsiveBannerSettings {
        $image: JQuery;
    }

### This demo:

Resize the screen to see effects of banner below

    import {IResponsiveBanner, IResponsiveBannerSettings, ResponsiveBanner} from './class.cs-responsive-banner';

    // Demo usage

    const $banner: JQuery = $('.cs-responsive-banner');

    const banner: IResponsiveBanner = new ResponsiveBanner($banner);

    const tabletSrc: string = $banner.attr('data-src-tablet');
    const desktopSrc: string = $banner.attr('data-src-desktop');
    const mobileSrc: string = $banner.attr('data-src-mobile');

    banner.addNewSource('desktop', {
        sourceUrl: desktopSrc,
    });

    banner.addNewSource('tablet', {
        sourceUrl: tabletSrc,
    });

    banner.addNewSource('mobile', {
        sourceUrl: mobileSrc,
    });

    function setSize(width) {
        if (width > 1024) {
            banner.setSize('desktop');
        } else if (width >= 768) {
            banner.setSize('tablet');
        } else {
            banner.setSize('mobile');
        }
    }

    $(window).on('resize', function () {
        let width: number = $(window).width();

        setSize(width);

    });

    setSize($(window).width());

    export default banner;