JSFiddle - React, Tailwind, and code Playground

by JellyBelly

HTML

<script src="http://slidesjs.com/examples/simple/js/slides.min.jquery.js"></script>


<div class="slidesDiv">
    <div class="slides_container">
        <div>
            <img src="http://www.danieletabacco.com/public/image/Jquery.gif" />
        </div>
        <div>
            <img src="http://www.flashfree.it/wp-content/uploads/2011/07/jquery1.gif" />
        </div>
        <div>
            <img src="http://i42.tinypic.com/qzi2k3.jpg" />
        </div>
    </div>
    <div class="left_arrow">
        <a href="#"><img src="http://4wardoregon.com/image/topic/Arrow_Left.png" alt="left" /></a>
    </div>
     <div class="right_arrow">
        <a href="#"><img src="http://4wardoregon.com/image/topic/Arrow_Right.png" alt="right" /></a>
    </div>
</div>

CSS

.slidesDiv {width: 400px;}

.slidesDiv .slides_container {
    z-index: 1;
    width: 400px;
    height: 200px;
}

.left_arrow,
.right_arrow {
    position: relative;
    z-index: 20;
    width: 25px;
    margin-top: -110px;
    
    /* This goes for left only: */
    float: left;
}

.right_arrow {
    /* And this overrides the above */
    float: right;
}

JavaScript

$(document).ready(function() {
    $('.slidesDiv').slides();
});