滑块箭头的问题

Question

我在跟随 youtube 上的教程时遇到了很多滑块箭头问题。它没有放在图片和推荐旁边，而是放在顶部。一开始不是这样的，后来我遇到了问题glider.js，于是重写了代码，然后漏洞就出现了

HTML代码

    <section class="testimonials-section">
      <div class="wrapper">
        <h2>Testimonials</h2>

        <div class="testimonials container">
          <div class="testimonials">
            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Darlene Richards,</strong> Amazon
                  </div>
                </div>

                <img src="images/testimonial1.png" alt="">
              </div>
            </div>

            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Peter Williams,</strong> Louis Vuitton
                  </div>
                </div>

                <img src="images/testimonial3.png" alt="">
              </div>
            </div>

            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Tara Green,</strong> Ferrari
                  </div>
                </div>

                <img src="images/testimonial2.png" alt="">
              </div>
            </div>
          </div>

          <span class="slider-prev">
            <img src="images/left-arrow.svg" alt="">
          </span>

          <span class="slider-next">
            <img src="images/right-arrow.svg" alt="">
          </span>
        </div>
      </div>
    </section>

CSS代码

.slider-prev,
.slider-next {
    position: absolute;
    top: 68px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    cursor: pointer;
}

.slider-next {
    right: 0;
}

Answer 1

这是因为 css 位置属性的工作方式 more info

尝试添加这一行，看看是否有帮助：

编辑使用 .testimonials.container 选择器而不是 .testimonials

.testimonials.container  {
  position: relative;
}

滑块箭头的问题

Trouble with slider arrows

html

javascript

css

frontend

slider