JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper cf">
    <div class="slide"><img src="http://placekitten.com/g/500/250"/></div>
    <div class="slide"><img src="http://placekitten.com/g/500/300"/></div>
    <div class="slide"><img src="http://placekitten.com/g/500/500"/></div>
    <div class="slide"><img src="http://placekitten.com/g/500/400"/></div>
    <div class="slide"><img src="http://placekitten.com/g/500/250"/></div>
</div>

CSS

.wrapper { width: 300px; }
.slide, img { float: left; }
.slide {height:800px;}
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

JavaScript

var
    duration = 1000,
    delay = 5000,
    total = $('.slide').length,
    slide = 0,
    interval = null,
    offset = [],
    working = false,
    update = function() {
        working = true;
        if(slide++ >= total) slide = 0;
        $("body").animate({scrollTop: offset[slide]}, duration, function() {
            working = false;
        });
    };
    
$('.slide').each(function() {
    offset.push($(this).offset().top);
});
    
interval = setInterval(update, delay);