JSFiddle - React, Tailwind, and code Playground

by Zero Fx

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="test_sl">
            <ul class="bxslider">
              <li><img src="https://api.fnkr.net/testimg/216x307/00CED1/FFF/?text=img+test1"></li>
              <li><img src="https://api.fnkr.net/testimg/216x307/00CED1/FFF/?text=img+test2"></li>
              <li><img src="https://api.fnkr.net/testimg/216x307/00CED1/FFF/?text=img+test3"></li>
              <li><img src="https://api.fnkr.net/testimg/216x307/00CED1/FFF/?text=img+test4"></li>
            </ul>

            <input class="prev_btn" type="submit" name="" value="PREV">

            <input class="next_btn" type="submit" name="" value="NEXT">

        </div>

CSS

* {padding: 0;margin: 0;}
body {background-color: #252525;outline: none;}

.test_sl {
    width: 600px;
    height: 400px;
    margin: 0 auto;
}

.bx-wrapper img {
    margin: 0 auto;
}

.next_btn {
    color: red;
    padding: 5px;
    background-color: #000;
    border: 2px solid #fff;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    display: block;
    margin: 0 auto;
    float: right;
    margin-top: 15px;
}

.prev_btn {
    color: red;
    padding: 5px;
    background-color: #000;
    border: 2px solid #fff;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    display: block;
    margin: 0 auto;
    float: left;
    margin-top: 15px;
}

.next_btn:hover {
    color: #fff;
}
.prev_btn:hover {
    color: #fff;
}

input[type="submit"]:focus { outline: none;}

JavaScript

$(document).ready(function() {
                $('.next_btn').click(function() {
                slider.goToNextSlide();
            })

            $(document).ready(function() {
                $('.prev_btn').click(function() {
                slider.goToPrevSlide();
                })
            })

            var slider = $('.bxslider').bxSlider({
                    auto: false,
                    autoStart: false,
                    infiniteLoop: false,
                    controls: false,
                    pager: false,
                    slideWidth: 564,
                    slideHeight: 312
			  });
			});