Responsive jQuery slideshows with background-size

by apimenov93

HTML

<table id="table" background="http://lorempixel.com/400/200/" border="1" bordercolor="#888" cellspacing="0" >
  <tbody>
    <tr>
      <td style="width: 100px;height:100px">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 100px;height:100px">&nbsp;</td>
    </tr>
  </tbody>
</table>

CSS

#slideshow {
    margin: 2em auto;
    width: 70%;
    max-width: 40em;
    overflow: hidden;
}

#slideshow-wrapper {
    width: 1600em;
    height: 15em;
    position: relative;
}

div.slide {
    width: 40em;
    height: 15em;
    float: left;
    background-repeat: no-repeat;
    background-size: contain;
}

#s1 {
    background-image: url(https://lh6.googleusercontent.com/-KOW-9jXpRJs/UAGpM_vlhdI/AAAAAAAABD8/MZvYcMEzdtA/s900/slide-21.jpeg);
}

#s2 {
    background-image: url(https://lh6.googleusercontent.com/-KOW-9jXpRJs/UAGpM_vlhdI/AAAAAAAABD8/MZvYcMEzdtA/s900/slide-21.jpeg);
}

#s3 {
    background-image: url(https://lh6.googleusercontent.com/-Xyc-ERpn1vk/UAGpNHK4YJI/AAAAAAAABD8/0cmDvfIFWNU/s900/slide-3.jpeg);
}

#s4 {
    background-image: url(https://lh6.googleusercontent.com/-o1zeOclXgro/UAGpNtCKZvI/AAAAAAAABD8/xNZnrWD8uRM/s900/slide-4.jpeg);
}

#slideshow-nav {
    margin: 1em 0;
    text-align: center;
}

#slideshow-nav a {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5;
    border: 1px solid silver;
    color: #333;
    text-decoration: none;
    margin-right: 0.5em;
}

#slideshow-nav a.active {
    background: #000;
    color: #fff;
    border-color: #000;
}

JavaScript

var Slideshow = {
    sleep: function(ms) {
        ms += new Date().getTime();
        while (new Date() < ms){}
    },
    fade: function(element) {
    
      var op = 1;  // initial opacity
      var timer = setInterval(function () {
          if (op <= 0.1){
              clearInterval(timer);
              element.style.display = 'none';
          }
          element.style.opacity = op;
          element.style.filter = 'alpha(opacity=' + op * 100 + ")";
          op -= op * 0.1;
      }, 10);
      
		},
    unfade:function (element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
        //alert("here");
    }, 10);
   
},  
    count: 1,
        images :{
    1:"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTWvmb8qTeuQns3IUPpZydgpoRU5Zbzm7BaEuSgUCM-n-jPIOCv",2:"https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg", 3:"https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRmT7KQ0bK_ld3A46WQDRcFMrAbQVuy60iKX6bxFLskzJEleNHtYg"
    },
    changeImage: function(){
    	
      Slideshow.count++;
      if (Slideshow.count === 4){
      	Slideshow.count = 1;
      }
      console.log(Slideshow.images[Slideshow.count]);
      Slideshow.fade(document.getElementById("table"));
      setTimeout(function(){
            document.getElementById("table").attributes[1].value = Slideshow.images[Slideshow.count];
            
      },500)
			setTimeout(function(){
      	Slideshow.unfade(document.getElementById("table"));
      },550);
      
    },
    changer:function(){
          console.log();
        	setInterval(Slideshow.changeImage.bind(this),5000);
        },
};


Slideshow.changer();