Tiny Slider

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

<div class="max-w-xl mx-auto">

    <div class="my-slider">
        <div>
            <a href="https://source.unsplash.com/random/800x500?1">
                <img class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition duration-200 ease-in-out" src="https://source.unsplash.com/random/800x500?1" alt="">
            </a>
        </div>
        <div>
            <a href="https://source.unsplash.com/random/800x500?2">
                <img class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition duration-200 ease-in-out" src="https://source.unsplash.com/random/800x500?2" alt="">
            </a>
        </div>
        <div>
            <a href="https://source.unsplash.com/random/800x500?3">
                <img class="object-cover w-full h-full opacity-80 group-hover:opacity-100 transition duration-200 ease-in-out" src="https://source.unsplash.com/random/800x500?3" alt="">
            </a>
        </div>
    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->

<script>
    var slider = tns({
        container: '.my-slider',
        items: 1,
        slideBy: 'page',
        autoplay: true
    });
</script>