JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><img src="http://memeart.tripod.com/smiley2.gif" alt="" /></li>
    <li><img src="http://memeart.tripod.com/smiley2.gif" alt="" /></li>
    <li><img src="http://memeart.tripod.com/smiley2.gif" alt="" /></li>
    <li><img src="http://memeart.tripod.com/smiley2.gif" alt="" /></li>
    <li><img src="http://memeart.tripod.com/smiley2.gif" alt="" /></li>
    <li><img src="http://memeart.tripod.com/smiley2.gif" alt="" /></li>
    <li><img src="http://memeart.tripod.com/smiley2.gif" alt="" /></li>
    <li><img src="http://memeart.tripod.com/smiley2.gif" alt="" /></li>
    <li><img src="http://memeart.tripod.com/smiley2.gif" alt="" /></li>
    <li><img src="http://memeart.tripod.com/smiley2.gif" 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

(function ($) {
    $.fn.imageLister = function (options) {
    
        options = $.extend({
                                counter : '#counter',
                                prev: '#prev',
                                next: '#next'
                            }, options || {});
                        
    
        return this.each(function (i, v) {
            var self = $(this),
                elems = self.find('li').hide(),
                num = elems.find('img').length,
                
                updateCounter = function() {
                    $(options.counter).text(self.find('img:visible').length + '/' + num);  
                }
                
                updateCounter();
           
            $(options.next).click(function(e) {
               e.preventDefault();
               var li = self.find('li'),
                   visible = li.filter(':visible'),
                   count = visible.length,
                   last = visible.last();
               
                (count)? last.next().fadeIn(updateCounter) : li.first().fadeIn(updateCounter);           
            });
            
            $(options.prev).click(function(e) {
               e.preventDefault();
               self.find('li:visible').last().fadeOut(updateCounter);
            });


            
        });
    }
    
})(jQuery);

$(function () {
    $('ul').imageLister({ 
                            counter: '#yazi-toplam-sayi', 
                            next: 'a.ileri', 
                            prev: 'a.geri' 
                        });
});