JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="content_slider">
    <div id="slide_1" class="slide_image">
        1
        <a href="#" class="next"></a><a href="#" class="prev"></a>
    </div>
    <div id="slide_of_dog" class="slide_image">
        2
         <a href="#" class="next"></a><a href="#" class="prev"></a>
    </div> 
    <div id="slide_of_cat" class="slide_image">
        3
        <a href="#" class="next"></a><a href="#" class="prev"></a>
    </div>
    <div id="slide_of_other_smelly_animal" class="slide_image">
        4
         <a href="#" class="next"></a><a href="#" class="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){
    // this e starts at 0, but our elements start at 1, so we need to add 1
    // then the prev would be 0 and next would be 2
    var this_index = $(this).index();
    var next_index = this_index + 1;
    var prev_index = this_index - 1;
    
    // Get the next an previous elements's ids.
    var next_slide_id = $(".slide_image:eq("+next_index+")").attr("id");
    var prev_slide_id = $(".slide_image:eq("+prev_index+")").attr("id");
    
    $(".prev", this).attr("href", "#"+prev_slide_id);
    $(".next", this).attr("href", "#"+next_slide_id);
    
});