JSFiddle - React, Tailwind, and code Playground

HTML

<table class="sliders">
    <th>
        <div class="slider">
            <img id="1" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1991_zpse1ab935f.jpg" border="0">
            <img id="2" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1990_zpsdbb15ea6.jpg" border="0">
            <img id="3" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1444_zps0ab9b6a4.jpg" border="0">
            <img id="4" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1280_zps59a98982.jpg" border="0">
            <img id="5" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1287_zps70bf6737.jpg" border="0">
            <img id="6" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1188_zps9a89bbf2.jpg" border="0">
        </div>
    </th>
    <th>
        <div class="sliderTwo">
            <img id="7" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1991_zpse1ab935f.jpg" border="0">
            <img id="8" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1188_zps9a89bbf2.jpg" border="0">
            <img id="9" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1280_zps59a98982.jpg" border="0">
            <img id="10" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1287_zps70bf6737.jpg" border="0">
            <img id="11" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1188_zps9a89bbf2.jpg" border="0">
            <img id="12" src="http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1188_zps9a89bbf2.jpg" border="0">
        </div>
    </th>
</table>

CSS

.sliders {
    margin: -40px auto;
}
.slider {
    height: 450px;
    width: 450px;
    overflow: hidden;
    margin: 60px 0 100px 0px;
    border: 5px solid black;
    border-radius: 20px;
}
.slider img {
    height: 450px;
    width: 450px;
    margin-bottom: 10px;
    border-radius: 15px;
}
.sliderTwo {
    height: 450px;
    width: 450px;
    overflow: hidden;
    margin: 60px 0 100px 0;
    border: 5px solid black;
    border-radius: 20px;
}
.sliderTwo img {
    height: 450px;
    width: 450px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 15px;
}

JavaScript

$(document).ready(function () {

    $(".slider #1").fadeIn(1000);
    $(".slider #1").delay(2000).fadeOut(1000);


    var sc = $(".slider img").size();
    var count = 2;

    setInterval(function () {
        $(".slider #" + count).fadeIn(1000);
        $(".slider #" + count).delay(2000).fadeOut(1000);

        if (count === sc) {
            count = 1;
        } else {
            count++;
        }
    }, 3500);


    $(".sliderTwo #7").fadeIn(1000);
    $(".sliderTwo #7").delay(2000).fadeOut(1000);


    var sc2 = 12;
    var count2 = 7;

    setInterval(function () {
        $(".sliderTwo #" + count2).fadeIn(1000);
        $(".sliderTwo #" + count2).delay(2000).fadeOut(1000);

        if (count2 === sc2) {
            count2 = 7;
        } else {
            count2++;
        }
    }, 3500);
});