Simple jQuery plugin

Hello everybody Welcome,

Last time i was design a theme for web site used with bootstrap and jQuery.  in that case i have to add a landscape image slider to the background. So i do search many plugins, but sadly i fail to place with my current code. then i refresh my jQuery knowledge and build my own plugin (see the link Below).

Here The Link


I'm not the professional web developer but here i would like to share my knowledge with you.

1. JQuery 

 ;(function($){
  
    var option={
            conts:[],
            index:0,
            imgs:null,
            layout:null,
            fadeinTime:1000,
            displayTime:3500,
            fadeoutTime:4500
    };
    $.extend($.fn,{
      
        imageShower:function(){
            option.layout=this;
            option.imgs=this.find("img");
            option.imgs.css("display","none");
          
            option.imgs.each(function(index){
                option.conts.push(this.src);
            });
          
          
            this.postition();
        },
  
      fade:function(){
          option.layout.fadeIn(option.fadeinTime,function(){
             setTimeout(function(){
                 option.layout.fadeOut(option.fadeoutTime,function(){
                    if(option.index==option.conts.length-1){
                        option.index=0;
                    }else{
                        option.index++;
                    }$.fn.postition();
                  
                 });
             },option.displayTime);
         });
          //this.postition();
       },//end fade
      
        postition:function(){
            option.layout.css({
                'background':'url('+option.conts[option.index]+')',
                'background-size':'cover',
                'height':'100%',
                'width':'100%',
                'display':'none'  
            });
          
            this.fade();
        }//end position
    });
  
})(jQuery);

And The HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="/js/background slider.js"></script>

<div class="fullscreen" id="backg">
    <img alt="" src="/images/01.jpg"> <img alt=""
        src="/images/02.jpg"> <img alt=""
        src="/images/03.jpg"> <img alt=""
        src="/images/04.jpg">

</div>

<script>
$("#backg").imageShower();
</script>

CSS

html, body {
    /* give this to all tags from html to .fullscreen */
    height:100%;
}
div.fullscreen
{

    height:100%;
    width:100%;
    background-size:cover;
}

This is the Simple Example. I use the bootstrap as well. So hope you enjoy 
Thank you.