JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="ohanah _HASOMupcomingEvents">
    <div class="event_detail_container top"><img src="http://placehold.it/150x150" />div 1</div>
    <div class="event_detail_container"><img src="http://placehold.it/150x150" />div 2</div>
    <div class="event_detail_container"><img src="http://placehold.it/150x150" />div 3</div>
    <div class="event_detail_container"><img src="http://placehold.it/150x150" />div 4</div>
</div>

CSS

.event_detail_container { border: 1px solid green; }
.event_detail_container img { display:none; }
.event_detail_container.top img { /* display: block; */ }
._slider { position:relative; }

JavaScript

var html = $('.ohanah._HASOMupcomingEvents').html();
$('.ohanah._HASOMupcomingEvents').html('').append($('<div/>').addClass('_slider').html(html)).css({overflow: 'hidden'});
$('img', $('.event_detail_container', '._slider').first()).css({display: 'inline-block'});
var parent_height = $('.ohanah._HASOMupcomingEvents').height();
setInterval(
	function() {
		var height = $('._slider > div:first-child').height();
		var accumulative_height = -height;

		$('.disabled_slider_item').removeClass('disabled_slider_item');
		$('._slider > div').each(function(index, item) {

			if (accumulative_height + $(item).height() >= parent_height) {
				$(item).addClass('disabled_slider_item');
				return false;
			}

			accumulative_height += $(item).height();
		});

		$('._slider').animate({top: '-=' + height + 'px'}, 500, function() {
			var old = $('._slider > div:first-child').detach();
			$('img', old).css({display: 'none'});
			$('._slider').append(old);
			$('._slider').css({top: 0});
			$('img', $('.event_detail_container', '._slider').first()).slideDown();
		});
	}, 5000
);