JSFiddle - React, Tailwind, and code Playground

by Stephen Kim

HTML

<div class="rowOfCircles">
    <div class="circle circle1 selectedCircle"></div>
    <div class="circle circle2"></div>
    <div class="circle circle3"></div>
</div>
<div class="image image1"></div>
<div class="image image2"></div>
<div class="image image3"></div>

CSS

.rowOfCircles {
    margin: 0 auto;
    width: 60px;
}
.circle {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    float: left;
    background: #ccc;
    margin-left: 10px
}
.selectedCircle {
    background: #000;
}
.image {
    width: 90%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid #535353;
    margin-top: 15px;
    float: left;
}
.image1 {
    background: #ccc;
}
.image2 {
    background: #FF0000;
}
.image3 {
    background: #3C8C3E;
}

JavaScript

$('.image2, .image3').hide();
$('.circle').click(function(){
    $('.circle').removeClass('selectedCircle');
    $(this).addClass('selectedCircle');
});
function changeImage() {
    setTimeout(function () {
        if ($('.selectedCircle').next().length < 1) {
		    $('.circle1').click();
            $('.image').hide('slide', {direction: 'left'}, 500);
            $('.image1').delay(500).show('slide', {direction: 'right'}, 500);
		}
		else {
		    $('.selectedCircle').next().click();
            if ($('.selectedCircle').hasClass('circle2')) {
                $('.image').hide('slide', {direction: 'left'}, 500);
                $('.image2').delay(500).show('slide', {direction: 'right'}, 500);  
            }
            else {
                $('.image').hide('slide', {direction: 'left'}, 500);
                $('.image3').delay(500).show('slide', {direction: 'right'}, 500);  
            }
        }
        changeImage();
	}, 3000)
}
changeImage();