JSFiddle - React, Tailwind, and code Playground

by thegje

HTML

<li data-transition="fade" style="visibility: visible; left: 0px; top: 0px; z-index: 20; opacity: 1;">
    <div id="prev" class="tp-leftarrow tparrows square-old large" style="opacity: ;">PREV</div>
    <div id="next" class="tp-rightarrow tparrows square-old large" style="opacity: ;">NEXT</div>
    <div id="gReel">
        <div id="gReelInner">
            <div class="carousel-item">
                <img src="http://thedefibwarehouse.com/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/i/-/i-grande-21508-defibrillateur-auto-samaritan-pdu-400-heartsine.net.jpg" alt="Samaritan" pdu="" 400="" personal="" defibrillation="" unit="" title="Samaritan">
                 <h5 class="name" style="display: inline">Samaritan PDU 400 Personal Defibrillation Unit</h5>
 <span class="price">599.00</span>

            </div>
            <div class="carousel-item">
                <img src="http://thedefibwarehouse.com/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/h/e/heartsine_samaritan_pad300.jpg" alt="Samaritan" pad="" 300p="" with="" 2="" paks="" (1="" adult="" 1="" paediatric)="" title="Samaritan">
                 <h5 class="name" style="display: inline">Samaritan PAD 300P With 2 PAD PAKS (1 Adult/1 Paediatric)</h5>
 <span class="price">850.00</span>

            </div>
            <div class="carousel-item">
                <img src="http://thedefibwarehouse.com/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/l/i/lifeline_aed_1.jpg" alt="Lifeline" aed="" (5="" year="" battery="" package)="" title="Lifeline">
                 <h5 class="name" style="display: inline">Lifeline AED (5 year battery package)</h5>
 <span class="price">1098.00</span>

            </div>
            <div class="carousel-item">
                <img src="http://thedefibwarehouse.com/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/l/i/lifeline_aed.jpg" alt="Lifeline" aed="" (7="" year="" battery=""...

CSS

#prev, #next {
    opacity:0.9;
    font-size:30px;
    text-align:center;
    position: absolute;
    top:70%;
    background:white
}
#next {
    right:39px;
}
.carousel-item {
    margin:0 5px;
    width: 290px;
    float: left;
    height: 310px;
    display: none;
}
.fullwidthbanner li {
    width:100%;
}
#gReel {
    width:1200px;
    height:550px;
    overflow:hidden;
    margin:0 auto;
    position: relative;
}
#gReelInner {
    width:10000px;
    position: absolute;
    top:0;
    left:0;
}
.tp-rightarrow.large {
    z-index: 100;
    cursor: pointer;
    position: relative;
    background: #fff url(../images/slideshow_arrows.png) no-repeat 100% 0;
    width: 78px;
    height: 78px;
    margin-left: -39px;
    margin-top: -39px;
    opacity: 0.8;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}
.tp-leftarrow.large {
    z-index: 100;
    cursor: pointer;
    position: relative;
    background: #fff url(../images/slideshow_arrows.png) no-repeat 0 0;
    width: 78px;
    height: 78px;
    margin-left: 39px;
    margin-top: -39px;
    opacity: 0.8;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

JavaScript

items = $(".carousel-item"); //get all items
a=0;b=4; // select initial items and span
c=b-a; // select difference (used for counting how many to load)
selection = items.slice(a, b);
d=70; //fade speed

//fade in and out 
function loadIn() { 
    $(selection[i]).show("slow");
    setTimeout(function(){
        if (i <= 4 ) {
            i++;
            loadIn();
        }
    }, d);
}
function loadOut() {
    $(selection[i]).hide("slow");
    setTimeout(function(){
        if (i <=4 ) {
            i++;
            loadOut();
        }
    }, d);
}
function animate(x) {
    if (x == "in") {
        i=0;
        loadIn();
    } else if (x === "out") {
        i=0;
        loadOut();
    }
}
//Initial Load
animate("in");

//fade out, change to next 'c' items, fade in
$("#next").click(function(){
    animate("out"); 
    setTimeout(function(){
        a = a+c; b = b+c;
        selection = items.slice(a, b);
        animate("in"); 
    },1000);
});


$("#prev").click(function(){
    animate("out"); 
    setTimeout(function(){
        a = a-c; b = b-c;
        selection = items.slice(a, b);
        animate("in"); 
    },1000);
});