JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<ul class="bxslider">
    <li>
        <img src="http://lh4.ggpht.com/siuzB88608t3t3_BvoIF60VPtTvc7MfSbX5dBYWhVNsR8hPGZPm3O56CXfvobL83gRyXyhyJ2Hx4--1_EMDFdWO5lJLOjmV8vTiJp6hi" />
    </li>
    <li>
        <img src="http://lh5.ggpht.com/jAOnlgoz-lK2LdYvlYY2xfC3Aa1K1v3DAwb95T5uYRPfwIAxljXl5EXc9DCpitmxbknH4YtE2mCSrZLIRVnJgF3kUxRRR0kXNWifQVRw" />
    </li>
</ul>
<div class="outside">
    <p><span id="slider-prev"></span>  <span id="slider-next"></span>

    </p>
</div>

JavaScript

$(document).ready(function () {
    $('.bxslider').bxSlider({
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        controls: true,
        pager: false,
        nextText: '<img src="http://i.imgur.com/TZDsPC0.png" height="25" width="25"/>',
        prevText: '<img src="http://i.imgur.com/AKjTWvT.png" height="25" width="25"/>'
    });
});