tiny lil'carousel

checkitout! just a little prototype that uses tiny-slider (http://ganlanyuan.github.io/tiny-slider) lib to make a mouse/keyboard friendly full window (fullscreen) carousel slider thingy. see: https://jsfiddle.net/edwardsharp/pm1a0hq9/show

by edwardsharp

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<!-- <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
  [if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/min/tiny-slider.helper.ie8.js"></script><![endif]
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

</head> -->

<div class="carousel" tabindex="0">
  <div class="item">
    <img src="https://source.unsplash.com/collection/993239/600x320" width="600" height="320" alt="">
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/collection/1673600/500x300" width="500" height="300" alt="">
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/collection/1513994/200x310" width="200" height="310" alt="">
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/collection/502925/400x330" width="400" height="330" alt="">
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/collection/1891993/640x300" width="640" height="300" alt="">
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/collection/1103088/360x240" width="360" height="240" alt="">
  </div>
  <div class="item">
    <img src="https://source.unsplash.com/collection/548245/460x280" width="460" height="280" alt="">
  </div>
</div>

<div>
  <h1>zomg
  </h1>
  <p>
    some other txt here!
  </p>
  <p>
    and yet another thing, here; wowowowowow!
  </p>
</div>

CSS

html,
body {
  padding: 0;
  margin: 0;
  background: black;
  color: white;
}

*:focus {
  outline: none;
}

.carousel>.item {
  width: 100vw;
  height: 100vh;
}

.carousel>.item>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

JavaScript

(function() {
  var slider = tns({
    container: '.carousel',
    items: 1,
    slideBy: 'page',
    autoplay: true,
    controls: false,
    arrowKeys: true,
    mouseDrag: true,
    autoplayButtonOutput: false,
    nav: false
  });
  var carousel = document.querySelector('.carousel');
  if (carousel) {
    carousel.focus();
  }
})();