Placing control to advance and return in Slide Show

I made a few simple adjustments to the slideshow to work only with the next and prev buttons and not with automatic transitions:

$(function() {
    var $slideshow = $("#slideshow div:first").addClass("visible").fadeIn(2000);

    $("#prev").on("click", function()
    {
        var $visible = $("#slideshow .visible");
        var $prev = $visible.prev();

        if ($prev.length > 0)
        {
            $visible.removeClass("visible").fadeOut(2000, function() {
                $prev.addClass("visible").fadeIn(2000);
            });
        }
    });

    $("#next").on("click", function()
    {
        var $visible = $("#slideshow .visible");
        var $next = $visible.next();

        if ($next.length > 0)
        {
            $visible.removeClass("visible").fadeOut(2000, function() {
                $next.addClass("visible").fadeIn(2000);
            });
        }
    });
});

I created a fake class called visible to control which element is visible at the time of the switch. This class is assigned to the first element at the beginning as well as the view ( fadeIn ) of it.

The next and previous functions are similar. First find the current slide $("#slideshow .visible") and then find the next or previous element, depending on the action of the user, eg. var $prev = $visible.prev(); . If the element was found if ($prev.length > 0) , the transition is made:

$visible.removeClass("visible").fadeOut(2000, function() {
    $prev.addClass("visible").fadeIn(2000);
});

Fiddle

Good afternoon, Here is a much simpler solution.

Javascript / jQuery:

jQuery(document).ready(function(){ 
    $(function(){
        $('#slideshow h4:gt(0)').hide();
        setInterval(function(){
          $('#slideshow :first-child').fadeOut(2000)
             .next('div').fadeIn(2000)
             .end().appendTo('#slideshow');}, 
          2000);
    });
});

CSS :

.slideshow-element{
    position: absolute;
    display: none;
}

HTML :

 <div id="slideshow">
        <div class="slideshow-element">Test 1</div>
        <div class="slideshow-element">Test 2</div>
        <div class="slideshow-element">Test 3</div>
        <div class="slideshow-element">Test 4</div>
    </div>

This solution is quite easy since it only corrects yours. I hope to be of help, best regards.