javascript - div carousel issue

Question

Three buttons, corresponding to three vertical p's, are arranged in sequence. Click the button of the second p, the second p will slide to the position of the first p, and the third p will slide to the position of the second p. Slide the first p to the bottom. All three p's are displayed at the same time.
Personally I think this is a carousel problem, but there are some differences, please give me some advice

The following is the code. The basic functions can be realized, but how to make the sliding effect? ​​It all slides upwards, and I feel that it is cumbersome to write. Do you have any suggestions for modification?

$(document).ready(function(){

    $(".p2btn").click(function(){
        $(".p2").css("transform","translateY(-100px)");
        $(".p3").css("transform","translateY(-100px)");
        $(".p1").css("transform","translateY(200px)")
});
    $(".p3btn").click(function(){
        $(".p2").css("transform","translateY(0px)");
        (".p3").css("transform","translateY(-200px)");
        $(".p1").css("transform","translateY(200px)");
});
    $(".p1btn").click(function () {
        $(".p2").css("transform","translateY(0px)");
        $(".p3").css("transform","translateY(0px)");
        $(".p1").css("transform","translateY(0px)");      
});

});

<p style="width: 500px;height: 400px;border: 1px solid black;">

        <p style="float: left;width: 100px;height: 100%;border: 1px solid red;"> 
            <input class="p1btn" type="button" value="button1" />
            <input class="p2btn" type="button" value="button2" />
            <input class="p3btn" type="button" value="button3" />
        </p>
        
        <p style="float: left;width: 350px;height: 100%; margin-top: 30px;">
            <p class="p1" style="width: 350px;height: 100px;background-color:bisque;">
                1111
            </p>
        <p class="p2" style="width: 350px;height: 100px;backgroundcolor:blueviolet;">
            22222222
        </p>
        <p class="p3" style="width: 350px;height: 100px;background-color: green;">
                33333333
        </p>
    </p>
</p>

Answer 1

It’s actually much simpler than you think. The sliding pictures are actually already arranged in a sequence, waiting for your css to change. Common ones include

transform: translateX(xxxx)

But at the same time set the css position corresponding to the next moment after sliding for all pictures, and then when triggered, you can achieve the effect you want

Answer 2

It’s a sorting problem. Just click on which p to determine how to change the class name to p. Just use transition to make a smooth transition