JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://palmwp.sb-studio.co.uk/wp-content/themes/palm/js/jquery.cycle.all.js"></script>
<div class="slider-wrap">
    <div class="outer">
        <img src="http://placekitten.com/g/700/300" />
        <div class="outer-over">
            <div class="inner-over">
                <div class="over">HELLO</div>
            </div>
        </div>
    </div>
    <div class="outer">
        <img src="http://placekitten.com/g/700/300" />
        <div class="outer-over">
            <div class="inner-over">
                <div class="over">HELLO</div>
            </div>
        </div>
    </div>
</div>

CSS

.slider-wrap {
    position: relative;
    width: 100% !important; height: auto !important;
}

.outer {
    width: 100%;
    height: auto;
    background-color: orange;
}
.outer img {
    width: 100% !important;
    height: auto !important;
}
.outer-over {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
}
.inner-over {
    display: table;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.over {
    display: table-cell;
    vertical-align: middle;
}

JavaScript

$('.slider-wrap').cycle({
    fx: 'fade',
    speed: 500,
    timeout: 8000,
    slideResize: false
});