<div class="wrapper">
  <h1>Tiny Slider JS</h1>
  <p>Trying out this <a href="https://github.com/ganlanyuan/tiny-slider">cool slider</a>. Lotsa <a href="https://ganlanyuan.github.io/tiny-slider/demo/">options</a></p>
  <div class="my-slider">
    <div><img src="https://picsum.photos/id/352/520/320" alt="image 1"></div>
    <div><img src="https://picsum.photos/id/474/520/320" alt="image 2"></div>
    <div><img src="https://picsum.photos/id/255/520/320" alt="image 3"></div>
    <div><img src="https://picsum.photos/id/387/520/320" alt="image 4"></div>
    <div><img src="https://picsum.photos/id/379/520/320" alt="image 5"></div>
    <div><img src="https://picsum.photos/id/382/520/320" alt="image 6"></div>
    <div class="text">
      <p>You might want to check out <a href="https://glidejs.com/">Glide</a> or <a href="https://keen-slider.io/">Keen Slider</a> both of which are even tinier.</p>
      <p><a href="https://itnext.io/javascript-sliders-will-kill-your-website-performance-5e4925570e2b">Good article</a> on performance issues and using pure CSS instead.</p>
*, *::before, *::after {
  box-sizing: border-box;

body {
  margin: 1em;
  background-color: #222;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  line-height: 1.75;
  color: #ddd;
.wrapper {
  background-color: #181818;
  width: calc(520px + 2em);
  margin: 2em auto;
  padding: 1em;
  border-radius: 10px;
  // resize: both;
  // overflow: auto;
.my-slider {
  margin-block: 1em;
a {
  color: #25f;
button {
  all: initial;
  display: inline-block;
  margin: 0.5em 0.5em 0.5em 0;
  padding: 0.25em 0.5em;
  font-size: 1.25em;
  line-height: 1;
  border-radius: 3px;
  background-color: #25f;
  color: #eee;
.text {
  max-width: 100%;
  border-radius: 10px;
.text {
  aspect-ratio: 8 / 5;
  background-color: darkgreen;
  padding: 2em;
  font-size: 0.7em;
View Compiled
const slider = tns({
  container: ".my-slider",
  items: 1,
  slideBy: "page",
  mouseDrag: true,
  swipeAngle: false,
  speed: 400, // transition speed
  autoplay: true,
  autoplayTimeout: 4000,
  controls: true,
  nav: true,
  controlsPosition: "bottom",
  mode: "carousel" // use gallery for fading

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js