Блог

Спасибо, что изучили мою проблему.

Я создаю небольшой веб-сайт: http://testgod0312.000webhostapp.com / У меня проблема с моим слайдером.

1. Я не могу расположить p изображение ниже. Существует проблема с высотой, которая в настоящее время является абсолютной от верхней части раздела. Что еще более важно, я изо всех сил пытаюсь выровнять p по середине экрана
2. В конце каждого есть странный элемент p , и я не знаю, как его удалить…
3. Я изо всех сил пытаюсь расположить стрелки, я бы хотел, чтобы они находились на границе изображения, а не на границе экрана.

Мои p и img являются абсолютными позициями, потому что я должен их перекрывать. Затем с помощью JS-скрипта изображение становится активным, а другое неактивным.

HTML — это:

  <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>
 

CSS здесь (также slider.css в папке ресурсов на сайте):

 .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;
}
 

Обратите внимание, что suivant ссылается на следующую стрелку и предшествует предыдущей стрелке.

Спасибо за вашу помощь, ребята!!