JSFiddle - React, Tailwind, and code Playground

by alois de gouvello

HTML

<script src="http://unslider.com/unslider.min.js"></script>
<div class="banner">
    <ul>
        <li style="background-image: url(http://unslider.com/img/wood.jpg);">
            	<h1>Fluid, flexible, fantastically minimal.</h1>

        </li>
        <li style="background-image: url(http://unslider.com/img/subway.jpg);">
            	<h1>Open-source.</h1>

        </li>
        <li style="background-image: url(http://unslider.com/img/shop.jpg);">
            	<h1>Uh, that’s about it.</h1>

        </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    text-align: center;
    height: 406px;
    color: white;
}
.banner ul {
    list-style: none;
    width: 100%;
}
.banner ul li {
    display: block;
    float: left;
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
}

JavaScript

$('.banner').unslider({
    fluid: true,
    dots: true,
    speed: 500
});