问题描述
我正在做一个项目，我想要一个响应式幻灯片，它看起来像 enter image description here
在开始时，translate3d 为 0px 元素工作正常，但是当我使用 translate3d 时，隐藏元素开始显示如下enter image description here
我不知道为什么..帮我写代码
我知道我可以使用 swiper JS 等。但我想用纯 CSS 和 Javascript 来创建一些东西^^
HTML、CSS 和 JS 代码：
const testimonials_button_navigation =
document.querySelector(".testimonials_button_navigation");
const testimonials_container = document.querySelector(".testimonials_container");
const testimonials_contents = testimonials_container.children;
const containerWidth = testimonials_container.offsetWidth;
const margin = 30;
var content = 0;
var totalcontents = 0;
var jumpSlideWidth = 0;
var selected_contents = 0;
var pat = 0;
function next() {
pat = pat-testimonials_container.offsetWidth / 5;
testimonials_container.style.transform = "translate3d(" + pat + "px,0px,0px)";
for (let i = 0; i < testimonials_contents.length; i++) {
if (testimonials_contents[i].className == "testimonials_content active") {
selected_contents = i;
}
}
testimonials_contents[selected_contents].className = "testimonials_content";
testimonials_contents[selected_contents + 1].classList.add("active");
/*removed_content = testimonials_contents[0];
testimonials_contents[0].remove();
testimonials_container.appendChild(removed_content);*/
}
function prev() {
pat = pat + testimonials_container.offsetWidth / 5;
testimonials_container.style.transform = "translateX(" + pat + "px)";
for (let i = 0; i < testimonials_contents.length; i++) {
if (testimonials_contents[i].className == "testimonials_content active") {
selected_contents = i;
}
}
testimonials_contents[selected_contents].className = "testimonials_content";
testimonials_contents[selected_contents - 1].classList.add("active");
}:root {
--first_color: #15241c;
--second-color: #09382f;
--third-color: #FF882E;
--fourth-color: #E55E2E;
--fifth-color: #F8F1E0;
--sixth-color: #EC9937;
}
* {
Box-sizing: border-Box;
margin: 0;
padding: 0;
}
.Testimonials {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
max-width: 100%;
margin: 40px 0px;
}
.Testimonials_title h2 {
font-size: 42px;
letter-spacing: -2px;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 30px;
text-align: center;
color: var(--first_color);
}
.Testimonials_title>p {
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 40px;
font-weight: 300;
text-align: center;
}
.Testimonials_bottom {
position: relative;
width: 100%;
height: 100%;
overflow-x: hidden;
}
.testimonials_container {
display: grid;
grid-auto-flow: column;
grid-auto-flow: column;
grid-auto-columns: minmax(20%,1fr);
margin-top: 30px;
width: 100%;
transition: transform .3s ease-in-out;
}
.testimonials_content {
transform: scale(0.9);
opacity: 0.8;
transition: transform .3s ease-in-out;
}
@media (max-width: 479px) {
.testimonials_container {
grid-auto-columns: 100%;
}
}
@media (min-width: 480px) and (max-width: 719px) {
.testimonials_container {
grid-auto-columns: 50%;
}
}
@media (min-width: 720px) and (max-width: 1500px) {
.testimonials_container{
grid-auto-columns: 33.3%;
}
}
.testimonials_container .active {
opacity: 1;
transform: scale(1.0);
}
.testimonials_avatar {
position: absolute;
left: 50%;
top: -30px;
width: 90px;
height: 90px;
margin-left: -45px;
z-index: 1;
}
.testimonials_avatar img {
width: 90px;
height: 90px;
border-radius: 100%;
border: 6px solid #fff;
Box-shadow: 0 9px 26px rgba(58,87,135,0.1);
}
.testimonials_text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 75px 50px 75px;
overflow: hidden;
background: var(--third-color);
border: 1px solid var(--second-color);
border-radius: 10px;
transition: all .3s ease-in-out;
}
.testimonials_text_after {
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
color: var(--fifth-color);
opacity: .3;
font-size: 35px;
transition: all 400ms linear;
bottom: 25px;
right: 30px;
}
.testimonials_text_before {
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
color: var(--fifth-color);
opacity: .3;
font-size: 35px;
transition: all 400ms linear;
top: 25px;
left: 30px;
}
.testimonials_text p {
color: var(--second-color);
font-size: 14px;
font-family: Georgia,"Times New Roman",Times,serif;
font-style: italic;
line-height: 24px;
padding-bottom: 10px;
font-weight: 500;
}
.testimonials_information h3 {
font-weight: 600;
color: var(--second-color);
font-size: 18px;
}
.testimonials_information h4 {
font-weight: 400;
font-size: 12px;
padding-top: 6px;
color: var(--second-color);
}
.testimonials_container_button {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 50%;
color: var(--fifth-color);
width: 80px;
height: 50px;
margin-top: -25px;
z-index: 1;
cursor: pointer;
background: var(--first_color);
transition: all 200ms linear;
outline: none;
}
.testimonials_container_button.testimonials_container_button_next {
right: -30px;
padding-right: 20px;
border-radius: 60px 0 0 60px;
}
.testimonials_container_button.testimonials_container_button_prev {
left: -30px;
padding-left: 20px;
border-radius: 0 60px 60px 0;
}
.testimonials_container_button.testimonials_container_button_next:hover
{
right: -15px;
background: var(--second-color);
}
.testimonials_container_button.testimonials_container_button_prev:hover
{
left: -15px;
background: var(--second-color);
}
<!DOCTYPE html> <html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/f0d7c1b694.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="Testimonials">
<div class="Testimonials_top">
<div class="Testimonials_title">
<h2>Testimonials</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="Testimonials_bottom">
<div class="testimonials_container_button testimonials_container_button_prev" onclick="prev();"><i
class="fa fa-caret-left"></i></div>
<div class="testimonials_container remove">
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="007-dratini.png" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="003-charmander.png" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content active">
<div class="testimonials_avatar">
<img src="004-squirtle.png" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="005-pikachu.png" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="006-psyduck.png" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="001-bullbasaur.png" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="002-snorlax.png" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
<div class="testimonials_content">
<div class="testimonials_avatar">
<img src="008-eevee.png" alt="">
</div>
<div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>
<div class="testimonials_text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,when an
unkNown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class="testimonials_information">
<h3>John Doe</h3>
<h4>Owner</h4>
</div>
</div>
<div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
</div>
</div>
<div class="testimonials_container_button testimonials_container_button_next" onclick="next();"><i
class="fa fa-caret-right"></i></div>
</div>
<div class="testimonials_button_navigation">
</div>
</section>
</body>
</html>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）