JSFiddle - React, Tailwind, and code Playground

by Ian Sanders

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300, 300italic, 700"></script>
<div id="slideshow"> 
        <div class="slide top" id="slide1">
            <div>Men's Neckties</div>
        </div>
        <div class="slide" id="slide2">
            <div>Boys's Neckties</div>
        </div>
        <div class="slide" id="slide3">
            <div>Quilts</div>
        </div>
        <div class="slide" id="slide4">
            <div>Boy's Bow Ties</div>
        </div>
        <div class="slide" id="slide5">
            <div>Men's Bow Ties</div>
        </div>

    <div class="slideswitch"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300, 300italic, 700);

 #slideshow {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#slideshow .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 2s;
    background-size: cover;
    background-position: center center;
}
#slideshow .slide.top {
    z-index: 1;
    opacity: 1;
    cursor: pointer;
}
#slideshow .slide div {
    margin: auto;
    padding: 0.5em;
    font-family: "Open Sans Condensed";
    display: block;
    top: 50%;
    width: 30%;
    position: relative;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0.8;
    color: #fff;
    text-align: center;
    font-size: 2em;
    border: 2px solid #fff;
    transition: opacity 0.5s;
}
#slideshow .slide:hover div {
    opacity: 1;
}
#slide1 {
    background-image: url(https://img0.etsystatic.com/019/0/5165914/il_fullxfull.560261468_joqw.jpg);
}
#slide1 div {
    background-color: maroon;
}
#slide2 {
    background-image: url(https://img0.etsystatic.com/029/0/5165914/il_fullxfull.582619528_nuu7.jpg);
}
#slide2 div {
    background-color: firebrick;
}
#slide3 {
    background-image: url(https://img0.etsystatic.com/004/0/5165914/il_fullxfull.373546614_j6w2.jpg);
}
#slide3 div {
    background-color: dodgerblue;
}
#slide4 {
    background-image: url(https://img0.etsystatic.com/032/0/5165914/il_fullxfull.652057574_te9k.jpg);
}
#slide4 div {
    background-color: goldenrod;
}
#slide5 {
    background-image: url(https://img1.etsystatic.com/042/0/5165914/il_fullxfull.652555195_2lvm.jpg);
}
#slide5 div {
    background-color: darkorange;
}
#slideshow .slideswitch {
    z-index: 2;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    text-align: center;
}
#slideshow .slideswitch .switchbutton {
    height: 0.8em;
    width: 0.8em;
   ...

JavaScript

$(".slide").each(function () {
    $(".slideswitch").append("<span class='switchbutton'></span>");
});

var topno = 0;
var playint = window.setInterval(function () {
    $("#slideshow>div").removeClass("top");
    $("#slideshow>div").eq(topno).addClass("top");
    topno++;
    if (topno == 5) {
        topno = 0
    };
}, 4000);

$(".switchbutton").click(function () {
    var index = $(this).index();
    console.log(index);
    console.log($("#slideshow>div").eq(index));
    $("#slideshow>div").removeClass("top");
    $("#slideshow>div").eq(index).addClass("top");
    //window.clearInterval(playint); 
})