JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><img src="http://files.mattlunn.me.uk/permanent/fish_images/1.jpg" alt="" /></li>
    <li><img src="http://files.mattlunn.me.uk/permanent/fish_images/2.jpg" alt="" /></li>
        <li><img src="http://files.mattlunn.me.uk/permanent/fish_images/3.jpg" alt="" /></li>
        <li><img src="http://files.mattlunn.me.uk/permanent/fish_images/4.jpg" alt="" /></li>
</ul>

<div id="yazi-toplam-sayi"></div>

<a href="#" class="geri">geri</a>
<a href="#" class="ileri">ileri</a>

CSS

ul { list-style:none; }
ul, li { margin:0; padding:0; }

JavaScript

var yaziListeAktif = 0;
var yaziListe = $("ul");

function yaziListeAktifOlan () { 
    var children = yaziListeChildren();
    
    $("#yazi-toplam-sayi").text((yaziListeAktif + 1) + "/ " + children.length);
    
    return children.eq(yaziListeAktif);
};

function yaziListeChildren() {
     return yaziListe.children();   
}

yaziListeAktifOlan().fadeIn().siblings().hide();

$(".ileri").bind("click", function (e){
    if (++yaziListeAktif == yaziListeChildren().length) {
        yaziListeAktif = 0;   
    };
    
    event.preventDefault();
});

$(".geri").bind("click", function (e){
    if (yaziListeAktif-- == 0) {
        yaziListeAktif = yaziListeChildren().length - 1;   
    };
    
    event.preventDefault();    
});

$(".geri,.ileri").bind("click", function() {
    yaziListeAktifOlan().fadeIn().siblings().hide();
});