Testimonial slider - css

Question

I have the following code:

<div id="box">
      <div class="wrapper">
        <div class="testimonial-container" id="testimonial-container">
          <div id="testimonial1" class="active">
            <img src="" />
          </div>
        </div>
        <button id="prev" onclick="prev()">&lt;</button>
        <button id="next" onclick="next()">&gt;</button>
      </div>
    </div>

#box {
  position: relative;


    width: auto;
  left: auto;
  margin: auto;
    max-width: 70em;
    min-height: 26em;
  max-height: 70em;





}
.img-con {
    position: absolute;
}
.img-con img {
    height: 1px;
    width: 1px;
}

.testimonial-container {


  margin-top: 1%;
    width: 85%;
    height: 100%;
    position: relative;
    margin: auto;
    padding: 1.8em 1.2em;


}
.testimonial-container p {
    color: #8c8c90;
    text-align: center;
    font-size: 0.9em;
    line-height: 2em;
    letter-spacing: 0.05em;
}
.testimonial-container img {
    display: block;
    margin: 1.8em auto 1.25em auto;
    border-radius: 50%;
    width: 4.4em;
}
.testimonial-container h3 {
    color: #2d3d67;
    font-size: 1em;
    text-align: center;
}
.testimonial-container h6 {
    color: #bcc4da;
    font-size: 0.9em;
    letter-spacing: 0.03em;
    font-weight: 400;
    text-align: center;
}
.wrapper button {
    font-size: 1.8em;
    color: #0a69ed;
    height: 2.2em;
    width: 2.2em;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    border: none;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
button#next {
    right: -1.1em;
}
button#prev {
    left: -1.1em;
}

@media screen and (max-width: 650px) {
    .wrapper {
        font-size: 14px;
    }
}

window.addEventListener("load", function() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("box").style.display = "block";
});
const testimonials = [
  {
    name: "example",
    job: "example",
    image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
    testimonial:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
  },
  {
    name: "example",
    job: "example",
    image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
    testimonial:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
  },
  {
    name: "example",
    job: "example",
    image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
    testimonial:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
  }
];
let f = 0; // current slide
let j = testimonials.length; // total slides
let testimonialContainer = document.getElementById("testimonial-container");
function next() {
  f = (j + f + 1) % j;
  displayTestimonial();
}

function prev() {
  f = (j + f - 1) % j;
  displayTestimonial();
}
let displayTestimonial = () => {
  testimonialContainer.innerHTML = `
        <p>${testimonials[f].testimonial}</p>
         <img src=${testimonials[f].image}></img>
        <h3>${testimonials[f].name}</h3>
        <h6>${testimonials[f].job}</h6>
        `;
};
window.onload = displayTestimonial;

This outputs:

The only problem is that for some reason, it cuts out the button at the end.

Expected Output:

How can I fix this? Thanks

I tried to change the width of the #box but it did not affect anything. Im pretty sure the problem is coming from #box but I'm not sure which part directly affects it, since doing width: auto wont change anything either.

Answer 1

I have solved this problem, you can take a look at my version https://codepen.io/bozzhik/pen/bGKReqm

I tried to wrap it all in a container block and set the margins 50px

<div id="container"</div>

and properties for this block

#container { margin: 50px;}

It turned out what I needed (this is my first help on this site)