JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div class="hotels">
    <ul class="banner">
        <li class="banner-1"><img src="http://feht.listedcompany.com/images/pic_thum_b.jpg" /></li>
        <li class="banner-3"><img src="http://feht.listedcompany.com/images/pic_thum_b.jpg" /></li>
        <li class="banner-5"><img src="http://feht.listedcompany.com/images/pic_thum_b.jpg" /></li>
        <li class="banner-7"><img src="http://feht.listedcompany.com/images/pic_thum_b.jpg" /></li>
        <li class="banner-9"><img src="http://feht.listedcompany.com/images/pic_thum_b.jpg" /></li>
        <li class="banner-10"><img src="http://feht.listedcompany.com/images/pic_thum_b.jpg" /></li>
        <li class="banner-11"><img src="http://feht.listedcompany.com/images/pic_thum_b.jpg" /></li>
        <li class="banner-12"><img src="http://feht.listedcompany.com/images/pic_thum_b.jpg" /></li>
    </ul>
</div>
<div class="residences">
    <ul class="banner">
        <li class="banner-2"><img src="http://feht.listedcompany.com/images/pic_thum_a.jpg" /></li>
        <li class="banner-4"><img src="http://feht.listedcompany.com/images/pic_thum_a.jpg" /></li>
        <li class="banner-6"><img src="http://feht.listedcompany.com/images/pic_thum_a.jpg" /></li>
        <li class="banner-8"><img src="http://feht.listedcompany.com/images/pic_thum_a.jpg" /></li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.banner li {
    list-style: none;
    display: none;
}
.hotels, .residences {
    width: 224px;
    float: left;
}

JavaScript

$(document).ready(function () {
    // show first one because all are hidden by default
    var activeDiv = 1;
    showDiv(activeDiv);
    var timer = setInterval(changeDiv, 2000);


    function changeDiv() {
        activeDiv++;
        if (activeDiv == 13) {
            activeDiv = 1;
        }
        showDiv(activeDiv);
    }

    function showDiv(num) {
        //hide all
        $('.banner li').hide(); 
        // show active
        $('.banner-' + num).fadeIn(); 
    }

});