Need help with jQuery Slider

JavaScript
1

I’m using jQuery with jQuery UI in the given pen of “not yet slider project”…
I want the slides to actually slide and feel as a slide is migrating from one section to other.
i tride Jquery UI effects but didn’t achieved required results… the coming slide shows with sliding effect but the leaving slide is not leaving the section with effect.

Pen

below iAm sharing snippet of code… that works on next btn…
Note: the code in pen is little different from this one as I removed slide effect and used simple fadeIn() effect.

$(".next").click(function(){
            if(counter < slides.length -3) {
                                
                $(".prev-slide").html(slides[counter +1]);
                $(".active-slide").html(slides[counter +2]);
                $(".next-slide").html(slides[counter +3]);

                $(".prev-slide div").show("slide", { direction: "right" }, 1000);
                $(".active-slide div").show("slide", { direction: "right" }, 1000);
                $(".next-slide div").show("slide", { direction: "right" }, 1000);
                counter++;
                console.log(counter);
            } else if (counter === slides.length -3) {
                $(".prev-slide").html(slides[counter + 1 ]);
                $(".active-slide").html(slides[counter + 2 ]);
                $(".next-slide").html("");
                
                $(".prev-slide div").show("slide", { direction: "right" }, 1000);
                $(".active-slide div").show("slide", { direction: "right" }, 1000);
                counter = slides.length -2;
                console.log(counter);
            }
        });
2

I Solved it myself if any one need the solution here is the link to updated Pen.

Previously I tried Jquery UI to slide sections right left. but now its done with jQuery animate feature.