JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainSlider">
    <img src="http://www.wallpaperbase.com/wallpapers/photography/greece/greece_6.jpg" alt="griecheland" />
</div>

CSS

div#mainSlider {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

div#mainSlider img {
    position: absolute;
    left:0;
    top:0;
}

JavaScript

(function( $,window ){
    //glbals
    var methods, settings,
        //global objects
        $win,
        //helper functions
        ratio, stretchToCSS, fitContentToContext, halfOverflow;
    
    //set values
    $win = $(window);
           
    //global settings
    settings = {
        type: "fade",
        speed: 300,
        autoplay: true
    };
    
    //global helper functions
    halfOverflow = function( contentValue, contextValue ){
        //returns the overflow of the Content to the Context
        return ( (contextValue - contentValue) / 2 );
    };
    
    stretchToCSS = function( dimContent, dimContext ){
        //returns a Object with css Values to fit the content to the height or the width based on the ratio. DimContent is the width / height of the Content as array. Same for dimContext
        var css, ratioContent, ratioContext;
        
        ratioContent = dimContent[0] / dimContent[1];
        ratioContext = dimContext[0] / dimContext[1];
        
        if (ratioContent < ratioContext){
            css = {
                width: "100%", 
                height: "auto", 
                margin:  halfOverflow(dimContent[1], dimContext[1]) + "px 0 0 0"
            };
        }else{
            css = {
                width: "auto",
                height: "100%",
                margin: "0 0 0" + halfOverflow(dimContent[0], dimContext[0]) + "px"
            };
        }
        return css;
    };
    
    fitContentToContext = function($content, $context){
        //fits the content to the context
        $content.css( stretchToCSS( [ $content.width(),$content.height() ],[ $context.width(),$context.height() ] ) );
    };
    
    //plugin methods
    methods = {
        init : function( options ){
            //initalizing function
            return this.each(function(){
                var $that;
                $that = $(this);
                $.extend( {},settings,options );
                
               ...