JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://slidesjs.com/js/slides.min.jquery.js"></script>
<div class="slides">
    <div class="slides_container">
        <div>
            <img src="http://images.onesite.com/blogs.telegraph.co.uk/user/catherine_elsworth/m_cyrus.jpg" />
        </div>
        <div>
            <img src="http://republika.pl/blog_qy_4956163/7678096/tr/miley_cyrus_cute.png" />
        </div>
        <div>
            <img src="http://i42.tinypic.com/qzi2k3.jpg" />
        </div>
        <div>
            <img src="http://2.bp.blogspot.com/_J6WT_LBxSss/Sbf_0r0W63I/AAAAAAAAFxM/8Zyb0m8z0Uk/s400/49b6a81d3d35a%5B1%5D.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

.slides {width: 400px;}

.slides .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 () {
    $('.slides').slidesjs({
        next: 'right_arrow',
        prev: 'left_arrow',
        pagination: false,
        generatePagination: false
    });
});