Expansion of image in slider

JavaScript
1

Hello All,

Here is my script for a slider. Working fine. The only problem is that at the time of picture change, last picture gets expanded.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
#meta {
    height:370px;;
    background-size:cover;
    overflow:hidden;
		background-image:url(css/mou.jpg);

 }
#meta-image {
    width:100%;
 }
      </style>
  
        <script>
(function() {
   'use strict';

   var c,preloads=[];
   var n=1;
   var temp;
   var wait=10000;
   var speed=25;


function preload(){

for(c=0;c<arguments.length;c++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[c];

 }
   c=0;

 }
   preload('css/mou.jpg','css/moun1.jpg'); /* add as many images as you like */

function init(){ 
if(c>100){ 
   n++;
if(n>=1){
   temp=n-1;
   document.getElementById('meta').style.backgroundImage='url('+preloads[temp].src+')';
 }
if(n==preloads.length){
   n=0;
   temp=preloads.length;
 }
   c=0;
   return setTimeout(function(){init()},wait);
 } 
   document.getElementById('meta-image').src=preloads[n].src;
   document.getElementById('meta-image').style.opacity=c/100;
   c++;
   setTimeout(function(){init()},speed);
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
})();
</script>
    </head>

    <body>
     <div id="meta">
     <img id="meta-image" src="css/mou.jpg" alt="">
     </div>
 </body>
</html>
2

Expanded as the image gets larger or it is on display for longer?

3

larger