Carousel Fullscreen Javascript & CSS

HTML
<!-- NO HTML REQUIRE --> <!-- NO JQUERY REQUIRE --> <!-- http://tr13ze.github.io/JScarousel/ -->
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { position: absolute; height: 100%; width: 100%; } body { overflow: hidden; } picture { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } picture img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } img { transition: opacity .5s ease-in; } img + img { opacity: 0; }
JAVASCRIPT
var carousel; var box = document.createElement('picture'); var slider = document.getElementsByTagName("img"); var dir = 'https://i.imgur.com/' var images = [ 'HiaZsvV.jpg', 'pyiRNAP.jpg', 'U9hQk9k.jpg' ]; var desc = ['image','image', 'image']; var arrayLength = images.length; var time = 3000; var current = 0; box.className = 'carousel'; document.body.appendChild(box); for (var i = 0; i < arrayLength; i++) { carousel = document.createElement('img'); carousel.src = dir + images[i]; carousel.alt = desc[i] + ' ' + i; carousel.className = 'cat'; document.getElementsByClassName('carousel')[0].appendChild(carousel); } setInterval(function() { for (var i = 0; i < slider.length; i++) { slider[i].style.opacity = 0; } current = (current != slider.length - 1) ? current + 1 : 0; slider[current].style.opacity = 1; }, time);
Expand for more options Login