JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://pioul.fr/ext/jquery-diyslider/jquery.diyslider.min.js"></script>
<button id="go-left">&laquo;</button> <button id="go-right">&raquo;</button>

<div class="slider"><!-- The slider -->
    <div><!-- A mandatory div used by the slider -->
        <!-- Each div below is considered a slide -->
        <div class="a">Div #1</div>
        <div class="b">Div #2</div>
        <div class="c">Div #3</div>
        <div class="d">Div #4</div>
        <div class="e">Div #5</div>
    </div>
</div>

<button id="go-left">&laquo;</button> <button id="go-right">&raquo;</button>

<div class="slider"><!-- The slider -->
    <div><!-- A mandatory div used by the slider -->
        <!-- Each div below is considered a slide -->
        <div class="a">Div #1</div>
        <div class="b">Div #2</div>
        <div class="c">Div #3</div>
        <div class="d">Div #4</div>
        <div class="e">Div #5</div>
    </div>
</div>

CSS

div {
    color: #000;
    font-size: 30px;
    line-height: 1.5em;
    font-weight: bold;
}

div.a {
    background: red;
}

div.b {
    background: green;
}

div.c {
    background: blue;
}

div.d {
    background: black;
    color: #fff;
}

div.e {
    background: pink;
}

.slider {
    border: 3px solid #000;
}

JavaScript

$(".slider").each(function(){
    $(this).diyslider({
        width: "400px", // width of the slider
        height: "200px", // height of the slider
        display: 3, // number of slides you want it to display at once
        loop: false // disable looping on slides
    }); // this is all you need!
});

// use buttons to change slide
$("#go-left").bind("click", function(){
    // Go to the previous slide
   $(".slider").each(function(){
    $(this).diyslider("move", "back");
    });
});
$("#go-right").bind("click", function(){
    // Go to the previous slide
    $(".slider").each(function(){
    $(this).diyslider("move", "forth");
    })
});