JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<script src="https://raw.githubusercontent.com/viljamis/ResponsiveSlides.js/master/responsiveslides.min.js"></script>
<div class="header-right">
    <div class="banner">
         <div class="slider">
            <div class="callbacks_container">
                <ul class="rslides" id="slider">
                    <li>
                        <div class="banner">
                            <div class="caption">
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.slider {
    position: relative;
}
.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}
.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}
.rslides li:first-child {
    position: relative;
    float: left;
    width: 100%;
    height: 550px;
}
.banner{
    background-image: url(http://dummyimage.com/2592x1944/000/fff.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
}

JavaScript

$("#slider").responsiveSlides({
        auto: true,
        speed: 500,
        namespace: "callbacks",
        pager: true,
    });