[英]Testimonial slider - css
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()"><</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;
This outputs:这输出:
The only problem is that for some reason, it cuts out the button at the end.唯一的问题是,由于某种原因,它在最后切掉了按钮。
Expected Output:预计 Output:
How can I fix this?我怎样才能解决这个问题? Thanks谢谢
I tried to change the width of the #box
but it did not affect anything.我试图改变#box
的宽度,但它没有任何影响。 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.我很确定问题出在#box
但我不确定哪个部分直接影响它,因为执行width: auto
也不会改变任何东西。
I have solved this problem, you can take a look at my version https://codepen.io/bozzhik/pen/bGKReqm我已经解决了这个问题,你可以看看我的版本https://codepen.io/bozzhik/pen/bGKReqm
I tried to wrap it all in a container block and set the margins 50px我试图将它全部包装在一个容器块中并将边距设置为 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)原来是我需要的(这是我在这个网站上的第一个帮助)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.