JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<ul>
    <li>
        <img class="active" src="http://www.lorempixel.com/200/200" alt="" />
    </li>
    <li>
        <img src="http://www.lorempixel.com/200/201" alt="" />
    </li>
    <li>
        <img src="http://www.lorempixel.com/200/202" alt="" />
    </li>
</ul>

CSS

ul {
    list-style-type: none;
    padding:0;
}
li {
    list-style-type: none;
}
li img {
    -webkit-filter: grayscale(1);
    -webkit-filter: brightness(1.2) contrast(2.4) grayscale(0.9) hue-rotate(60deg) invert(0.2);
    -webkit-filter: brightness(2.4) contrast(2.1) grayscale(0.9) hue-rotate(300deg) invert(0.2) saturate(2.4) sepia(0.4);
    -webkit-transition:all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
li img.active {
    -webkit-filter: grayscale(0);
    -webkit-filter: brightness(1) contrast(1) grayscale(0) hue-rotate(0) invert(0);
    -webkit-filter: brightness(1) contrast(1) grayscale(0) hue-rotate(0) invert(0) saturate(1) sepia(0);
}

JavaScript

$.fn.bwSlider = function () {
    setInterval(function () {

        if ($('.active').parent().next().find('img').length > 0) {
            $('.active').parent().next().find('img').addClass('goingTo');
            $('.active').removeClass('active');
            $('.goingTo').addClass('active').removeClass('goingTo');
        } else {
            $('.active').removeClass('active').parent().parent().children("li:first-child").find('img').addClass('goingTo');
            $('.goingTo').addClass('active').removeClass('goingTo');
        };
    }, 4000);
};

$('li').bwSlider();