Slider issue – html css

thank you for looking into my issue.

I am creating a small website: http://testgod0312.000webhostapp.com/
I have an issue with my slider.

#1 I cant position the p below the image. There is a problem with the height currently absolute from top of section. More importantly, I struggle to align the p in the middle of the screen

#2 There is a weird item at the end of each p and i dont know how to remove it…

#3 I struggle to position the arrows, I would like them on the border of the image, not border of the screen

my p and img are absolute positions, because I have to overlap them. Then with a js script, an image becomes active and the other non_active

The html is:

 <div class="slider">
    <h2><span class="red">The Hierarchy</span></h2>
    <img src="assets/img/Slider/img1.jpg" alt="img1" class="img__slider active" />
    <img src="assets/img/Slider/img2.jpg" alt="img2" class="img__slider" />
    <img src="assets/img/Slider/img3.jpg" alt="img3" class="img__slider" />
    <p class="p__slider active"> test 1 blqblqbqbl blqblqbqbl blqblqbqbl blqblqbqbl </p>
    <p class="p__slider"> test 2</p>
    <p class="p__slider"> test sdaa</p>
    <div class="suivant">
        <i class="fas fa-chevron-circle-right"></i>
    </div>
    <div class="precedent">
        <i class="fas fa-chevron-circle-left"></i>
    </div>
</div>

The CSS is here (also slider.css in the asset folder on site):

.slider {
    height: 62vh;
    position: relative;
    margin: auto;
    background: var(--color1);
    justify-content: center;
    text-align: center;
}

.slider h2 {
    margin-bottom: 1rem;
    font-size: 2rem;
    text-align: center;
}

.slider img {
    object-fit: cover;
    max-width: 1200px;
    height: 50vh;
    width: 90%;
    position: absolute;
    opacity: 0;
    transition: opacity .5s;
    transform: translateX(-50%);
}

.slider img.active {
    opacity: 1;
}

.slider p {
    margin: auto;
    font-size: 1.5rem;
    position: absolute;
    top: 57vh;
    opacity: 0;
    transition: opacity .5s;
    color: var(--color2);
    max-width: 1200px;
    width: 1200px;
}

.slider p.active {
    opacity: 1;
}

.suivant, .precedent {
    color: #fff;
    font-size: 2.5rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.suivant {
    right: 1rem;
}

.precedent {
    left: 1rem;
}

To note, suivant refers to the next arrow and precedent to the previous arrow

Thank you for your help guys!!