JSFiddle - React, Tailwind, and code Playground

by Ian Sanders

HTML

<div id="slideshow">
    <div class="slide top" id="slide1">
        <div class="overlay"></div>
        <div class="slidetext">Mens' Neckties</div>
    </div>
    <div class="slide" id="slide2">
        <div class="overlay"></div>
        <div class="slidetext">Boys' Neckties</div>
    </div>
    <div class="slide" id="slide3">
        <div class="overlay"></div>
        <div class="slidetext">Quilts</div>
    </div>
    <div class="slide" id="slide4">
        <div class="overlay"></div>
        <div class="slidetext">Boys' Bow Ties</div>
    </div>
    <div class="slide" id="slide5">
        <div class="overlay"></div>
        <div class="slidetext">Mens' Bow Ties</div>
    </div>
    <div class="slideswitch"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
 #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.slidetext {
    margin: auto;
    padding: 0.7em 0.2em;
    font-family:"Open Sans Condensed";
    display: block;
    top: 50%;
    position: relative;
    width: 40%;
    -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 div.overlay {
    background: #000;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.5s; 
}
#slideshow:hover .slide div.slidetext {
    opacity: 1;
}
#slideshow:hover .slide div.overlay {
    opacity: 0.2;
}
#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 {
   ...

JavaScript

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

function curSlideButton(slideno) {
    $(".slideswitch .switchbutton").removeClass("current");
    $(".slideswitch .switchbutton").eq(slideno).addClass("current");
}

curSlideButton($('#slideshow>div.top').eq(0).index());

var topno = 1;
var playint = window.setInterval(function () {
    if (!$('#slideshow>div.top').is(":hover")) {
        $("#slideshow>div").removeClass("top");
        $("#slideshow>div").eq(topno).addClass("top");
        curSlideButton(topno);
        topno++;
        if (topno == 5) {
            topno = 0;
        }
    }
}, 5000);

$(".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");
    curSlideButton(index);
    window.clearInterval(playint);
});