rotating iframe carrousel

by Johan Vandeplas

CSS

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

iframe {
  display: block;
  position: absolute;
  border: 0;
  height: 100vh;
  width: 100vw;
  left: -100vw;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  transition-duration: 1s;
  -o-transition-duration: 1s;
  z-index:0
}

iframe.current {
  left: 0vw;
  z-index:2
}

iframe.next {
  left: 100vw;
  z-index:1
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  transition-duration: 0s;
  -o-transition-duration: 0s;
  z-index:0
}

JavaScript

var urls = [
    "https://iboodimage.cachefly.net/58213/fullscreen/animals-tree-grass.jpg",
    "https://iboodimage.cachefly.net/87886/fullscreen/thrustmaster-tx-racing-wheel-voor-xbox-one.jpg", "https://iboodimage.cachefly.net/87887/fullscreen/thrustmaster-tx-racing-wheel-voor-xbox-one.jpg"
  ],
  frames,
  next;

for (var i = 0; i < urls.length; i++) {
  var $b = $('body');
  if (i === 0) {
    $b.append('<iframe class="current" src="' + urls[i] + '"></iframe>');
  } else if (i === 1) {
    $b.append('<iframe class="next" src="' + urls[i] + '"></iframe>');
  } else {
    $b.append('<iframe src="' + urls[i] + '"></iframe>');
  }
}

frames = $('iframe');

setInterval(function() {
  $("iframe.current").removeClass('current');
  next = $("iframe.next").removeClass('next').addClass('current');
  $(next.next()[0] || frames[0]).addClass('next');
}, 5000);