I just did a slideshow with jQuery and looking at the code of "Next Slide" and "previos slide" buttons, I realized that they were almost the same, except for a couple of functions that change.

I think this could be refactored to be more efficient, but Im not sure how.

Could someone show me how?

```
//UI Binding
$nextbutton.on("click", function(){

    //Blocking control
    if (slideshowBlocked) return;
    slideshowBlocked = true;

    //Get active slide
    var $active = $slides.filter(".active");
    //Get new Slied
    var $newSlide = $active.next(".slide");
    if (!$newSlide.length){
        $newSlide = $slides.first();
    }

    //Prepare new slide beneath the active
    $newSlide.css({
        "z-index": 5,
        "display": "block"
    });

    //Fade out the active
    $active.fadeOut(function(){
        //Update states and CSS properties
        $(this).removeClass("active");
        $newSlide.addClass("active").css( "z-index", 10);;

        //Unblock slideshow
        slideshowBlocked = false;
    });
});
$prevbutton.on("click", function(){

    //Blocking control
    if (slideshowBlocked) return;
    slideshowBlocked = true;

    //Get active slide
    var $active = $slides.filter(".active");
    //Get new Slied
    var $newSlide = $active.prev(".slide");
    if (!$newSlide.length){
        $newSlide = $slides.last();
    }

    //Prepare new slide beneath the active
    $newSlide.css({
        "z-index": 5,
        "display": "block"
    });

    //Fade out the active
    $active.fadeOut(function(){
        //Update states and CSS properties
        $(this).removeClass("active");
        $newSlide.addClass("active").css( "z-index", 10);;

        //Unblock slideshow
        slideshowBlocked = false;
    });
});

```