我如何把我的按鈕放在左邊右邊？當(dāng)我試圖將它移到幻燈片的右邊或左邊時(shí)，它就消失了，我也使用了z-index。 它們會(huì)出現(xiàn)在幻燈片上，但不會(huì)出現(xiàn)在幻燈片之外 就像這樣，如果我試著把它移過(guò)幻燈片組件，按鈕就會(huì)消失，我也有共享代碼。請(qǐng)讓我知道。謝謝

const slides = document.querySelectorAll(".slide");
const btnLeft = document.querySelector(".slider-btn-left");
const btnRight = document.querySelector(".slider-btn-right");

let currentSlide = 0;
let maxSlide = slides.length;

console.log(slides);

// const goToSlide = function (slide) {
//   slides.forEach(
//     (s, i) => (s.style.transform = `translateX(${(i - slide) * 100}%)`)
//   );
// };

function nextSlide() {
  if (currentSlide === maxSlide - 1) {
    currentSlide = 0;
  } else {
    currentSlide++;
  }

  slides.forEach(
    (el, i) => (el.style.transform = `translateX(${(i - currentSlide) * 100}%)`)
  );
}

function prevSlide() {
  if (currentSlide === 0) {
    currentSlide = maxSlide - 1;
  } else {
    currentSlide--;
  }
  slides.forEach(
    (el, i) => (el.style.transform = `translateX(${(i - currentSlide) * 100}%)`)
  );
}

btnRight.addEventListener("click", nextSlide);

btnLeft.addEventListener("click", prevSlide);

* TESTIMONIAL SECTION */
.section-customers {
  padding: 9.6rem 0;
  background-color: #fed2d2;
}

.customers-heading-question,
.customer-weight-lost,
.customers-heading-answer {
  color: rgb(82, 82, 82);
}

.customers-illust {
  padding-bottom: 4.8rem;
}

.customers-text {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  justify-content: center;
}

.customers-text .customer-weight-lost {
  font-size: 2rem;
}

.customers-text .customer-weight-lost span {
  color: #a12222;
}

.customer-img {
  max-width: 100%;
  height: 10rem;
  width: 10rem;
  border-radius: 50%;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.caraseoul {
  position: relative;
  height: 35rem;
  max-width: 60rem;
  margin: 0 auto;
  overflow: hidden;
}

.testimonial {
  color: black;
}

.slide {
  position: absolute;
  width: 100%;
  text-align: center;
  padding: 2rem 0;

  background-color: white;
  border: 5px solid #a12222;
  transition: transform 1s;
  overflow: hidden;
}

.slide::after {
  content: "WHAT THE FUCK";
  position: absolute;
  left: -10%;
  top: 12%;
  font-size: 1.6rem;
  font-weight: 500;
  background-color: violet;
  padding: 2rem 6rem;
  transform: rotate(315deg);
}

.slider-btn {
  position: absolute;
  background-color: rgb(255, 166, 166);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  border: none;
  z-index: 99999;
  top: 50%;
}

.slider-btn-left {
  left: 0%;
  transform: translate(50%, -50%);
}
.slider-btn-right {
  right: 0%;
  transform: translate(50%, -50%);
}

.testimonial-text {
  font-size: 1.2rem;
  margin: 2rem;
  margin-top: auto;
}

.testimonial-author {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 0.6rem;
  color: navy;
}

.testimonial-status {
  font-size: 1.8rem;
}

.testimonial-status span {
  color: #a12222;
  font-weight: 600;
}

.btn-icon {
  height: 2.4rem;
  width: 2.4rem;
  stroke: #a12222;
}

<div class="caraseoul">
            <div class="slide">
              <img
                src="./images/customers/ryan-hoffman.jpg"
                alt="alexander"
                class="customer-img"
              />
              <blockquote class="testimonial">
                <p class="testimonial-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Ratione excepturi sint sequi laborum, nostru,excepturi sint
                  sequi laborum, nostru,excepturi sint sequi laborum, nostru
                </p>
                <p class="testimonial-author">Ryan Hoffman</p>
                <p class="testimonial-status">
                  <span>30 </span>kgs lost in 7 months
                </p>
              </blockquote>
            </div>
            <div class="slide">
              <img
                src="./images/customers/alexander.jpg"
                alt="alexander"
                class="customer-img"
              />
              <blockquote class="testimonial">
                <p class="testimonial-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Ratione excepturi sint sequi laborum, nostru,excepturi sint
                  sequi laborum, nostru,excepturi sint sequi laborum, nostru
                </p>
                <p class="testimonial-author">Alexander Hamilton</p>
                <p class="testimonial-status">
                  <span>10 </span>kgs lost in 2 months
                </p>
              </blockquote>
            </div>
            <div class="slide">
              <img
                src="./images/customers/edward.jpg"
                alt="alexander"
                class="customer-img"
              />
              <blockquote class="testimonial">
                <p class="testimonial-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Ratione excepturi sint sequi laborum, nostru,excepturi sint
                  sequi laborum, nostru,excepturi sint sequi laborum, nostru
                </p>
                <p class="testimonial-author">Cristina Niosi</p>
                <p class="testimonial-status">
                  <span>23 </span>kgs lost in 6 months
                </p>
              </blockquote>
            </div>
            <div class="slide">
              <img
                src="./images/customers/edward.jpg"
                alt="alexander"
                class="customer-img"
              />
              <blockquote class="testimonial">
                <p class="testimonial-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Ratione excepturi sint sequi laborum, nostru,excepturi sint
                  sequi laborum, nostru,excepturi sint sequi laborum, nostru
                </p>
                <p class="testimonial-author">Cristina Niosi</p>
                <p class="testimonial-status">
                  <span>23 </span>kgs lost in 6 months
                </p>
              </blockquote>
            </div>
            <div class="slide">
              <img
                src="./images/customers/edward.jpg"
                alt="alexander"
                class="customer-img"
              />
              <blockquote class="testimonial">
                <p class="testimonial-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Ratione excepturi sint sequi laborum, nostru,excepturi sint
                  sequi laborum, nostru,excepturi sint sequi laborum, nostru
                </p>
                <p class="testimonial-author">Cristina Niosi</p>
                <p class="testimonial-status">
                  <span>23 </span>kgs lost in 6 months
                </p>
              </blockquote>
            </div>
            <div class="slide">
              <img
                src="./images/customers/edward.jpg"
                alt="alexander"
                class="customer-img"
              />
              <blockquote class="testimonial">
                <p class="testimonial-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Ratione excepturi sint sequi laborum, nostru,excepturi sint
                  sequi laborum, nostru,excepturi sint sequi laborum, nostru
                </p>
                <p class="testimonial-author">Cristina Niosi</p>
                <p class="testimonial-status">
                  <span>23 </span>kgs lost in 6 months
                </p>
              </blockquote>
            </div>
            <div class="slide">
              <img
                src="./images/customers/edward.jpg"
                alt="alexander"
                class="customer-img"
              />
              <blockquote class="testimonial">
                <p class="testimonial-text">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Ratione excepturi sint sequi laborum, nostru,excepturi sint
                  sequi laborum, nostru,excepturi sint sequi laborum, nostru
                </p>
                <p class="testimonial-author">Cristina Niosi</p>
                <p class="testimonial-status">
                  <span>23 </span>kgs lost in 6 months
                </p>
              </blockquote>
            </div>
            <button class="slider-btn slider-btn-right">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="btn-icon"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M8.25 4.5l7.5 7.5-7.5 7.5"
                />
              </svg>
            </button>
            <button class="slider-btn slider-btn-left">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="btn-icon"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M15.75 19.5L8.25 12l7.5-7.5"
                />
              </svg>
            </button>
          </div>