JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="content_slider">
    <div id="slide_1" class="slide_image">
        1
        <a href="#" id="next"></a><a href="#" id="prev"></a>
    </div>
    <div id="slide_2" class="slide_image">
        2
         <a href="#" id="next"></a><a href="#" id="prev"></a>
    </div> 
    <div id="slide_3" class="slide_image">
        3
        <a href="#" id="next"></a><a href="#" id="prev"></a>
    </div>
    <div id="slide_4" class="slide_image">
        4
         <a href="#" id="next"></a><a href="#" id="prev"></a>
    </div> 

</div>
</body>

CSS

#content_slider {
    white-space: nowrap;
    margin-top: 66px;
}

.slide_image {

    display: inline-block;
    text-align: center;
    position: relative;
    height:200px;
}

#next, #prev {

    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 33%;
    cursor: col-resize;
    z-index: 101;

}

#prev {

    left: 0;
    cursor: col-resize;

}

#slide_1 {background-color:red}
#slide_2 {background-color:blue}
#slide_3 {background-color:green}
#slide_4 {background-color:yellow}

JavaScript

$('.slide_image').width($(window).width());

$('.slide_image').each(function(e){
    var next_link = $(this).next().attr('id');

$( "a#next" ).next().attr("href", next_link)
});

$('.slide_image').each(function(e){
    var prev_link = $(this).prev().attr('id');

$( "a#prev" ).prev().attr("href", prev_link)
});