Can anyone help create infinite reviews carousel. I have been trying for 2 days. Btw, I m new to web developement, if my code looks hard to see, I m sorry for that. Here s the code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.c)">
</head>
<body>
<div class="big-box">
<div class="heading">
<h1>Our Reviews</h1>
</div>
<div class="container">
<div class="content">
<div class="slide first-slide">
<img src="whiteProfile.jpeg">
<h3>Sans</h3>
<p>“This app allows me to do problem from my smartphone where I want and when I want to. The interface is easy to navigate and I find everything I need quickly. I can’t wait for new feature!”</p>
</div>
<div class="slide second-slide">
<img src="blackProfile.jpeg">
<h3>Adam</h3>
<p>“The tool X has really automated some of our company’s processes. We now spend less time doing manual work. It’s making problem very easy for us. Thanks to its scheduling feature, we don’t need staff to work outside of business hours.”</p>
</div>
<div class="slide third-slide">
<img src="blueProfile.jpeg">
<h3>Jane</h3>
<p>“Working with Company has been an absolute pleasure. Their team of skilled professionals is not only knowledgeable in their field but also dedicated to providing top-notch service and support. They took the time to understand our unique needs and developed a tailored solution that exceeded our expectations. I cannot recommend Company highly enough for any business seeking innovative software solutions and exceptional customer care.”</p>
</div>
<div class="slide fourth-slide">
<img src="cyanProfile.jpeg">
<h3>John</h3>
<p>“App has quickly become one of my favorite apps, thanks to its sleek design and powerful features. The app’s versatility allows me to stay organized, informed, and connected, all from the convenience of my mobile device. I appreciate the attention to detail and dedication to user satisfaction that the developers have put into App. It’s truly a game-changer and a must-have app for anyone looking to improve their overall digital experience.”</p>
</div>
<div class="slide fifth-slide">
<img src="greenProfile.jpeg">
<h3>Spark</h3>
<p>“App has quickly become one of my favorite apps, thanks to its sleek design and powerful features. The app’s versatility allows me to stay organized, informed, and connected, all from the convenience of my mobile device. I appreciate the attention to detail and dedication to user satisfaction that the developers have put into App.”</p>
</div>
</div>
<div class="btn-box">
<button class="btn btn-left"><ion-icon name="arrow-back-outline"></ion-icon></button>
<button class="btn btn-right"><ion-icon name="arrow-forward-outline"></ion-icon></button>
</div>
</div>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="script.js"></script>
</body>
</html>
c)
@import url( https://fonts.googleapis.com/c)2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap );
* {
font-family: Montserrat , sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 45px;
font-weight: 500;
margin-bottom: 15px;
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 15px;
margin-top: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.big-box {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
z-index: 100;
width: 720px;
display: flex;
justify-content: center;
align-items: center;
height: 600px;
overflow: hidden;
border-radius: 30px;
box-shadow: 12px 12px 24px #5a5a5a,
-12px -12px 24px #ffffff;
}
.content {
position: relative;
width: 3600px;
/* left: 50%; */
display: flex;
justify-content: center;
align-items: center;
transform: translateX(0);
transition: transform .3s ease-in,opacity .25s linear;
}
.slide {
width: 720px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h3 {
margin: 10px;
font-size: 25px;
font-weight: 500;
}
p {
width: 70%;
text-align: center;
margin: 15px;
font-weight: 400;
line-height: 25px;
}
.btn-box {
position: absolute;
height: 30px;
bottom: 20px;
display: flex;
justify-content: space-evenly;
width: 80px;
}
.btn {
font-size: 20px;
font-weight: 500;
outline: none;
border: none;
background-color: white;
width: 30px;
height: 30px;
border-radius: 15px;
padding-top: 4px;
}
.btn:hover {
background-color: gainsboro;
}
script
var rightButton = document.querySelector( .btn-right );
var leftButton = document.querySelector( .btn-left );
let transform = 0;
let current = 0;
rightButton.addEventListener( click , function() {
transform = transform - 720;
current++;
document.querySelector( .content ).style.transform = translateX( + transform + px) ;
});
leftButton.addEventListener( click , function() {
transform = transform + 720;
current--;
document.querySelector( .content ).style.transform = translateX( + transform + px) ;
});
我试图制造一只审查弹片,在我点击左或右 but时,它 s下页。 但是,我试图使这辆车子变得徒劳无益,因为当我到达每一方的终点时,它就永远把头一位爱的人 circle在一边。 感谢您的帮助