I'm having some issues with the code below:
<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()"><</button>
<button id="next" onclick="next()">></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;
When I run this code, it's cutting out the button at the end, instead of displaying as expected. Here is how it currently looks:
https://i.sstatic.net/Nw5jx.png
I suspect the issue lies within the #box section, but changing the width to auto doesn't seem to fix it. Can someone help me identify the problem and provide a solution? Thank you.
Tried adjusting the width of #box, but it didn't make any difference. I believe the issue originates from within #box, but I'm unsure which part specifically affects it, given that setting width: auto doesn't resolve the problem.