我在页面上遇到了麻烦。
我有一个3格的滑块，我想通过定位甚至是transform transformX来滑动，因为。我还有一个具有onclick功能的按钮，但是我只能使该按钮滑动div一次。只需单击一次按钮即可。每次按下按钮时都需要滑动它们\
<div class="big-wrapper">
<div class="game-label">
<p>TOP SLOT GAMES</p>
<div class="button-container">
<button type="submit" onclick="gameSliderLeft1()"><</button>
<button type="submit" onclick="gameSliderRight1()">></button>
<a href="#">SEE ALL</a>
</div>
</div>
<div class="game-list2">
<div class="game-list2-wrapper">
<div class="game2">
<img src="images/game5.png">
<p>Jumanji</p>
</div>
<div class="game2">
<img src="images/game6.png">
<p>Doctor Jekyll Goes Wild</p>
</div>
<div class="game2">
<img src="images/game7.png">
<p>Jack's Pot</p>
</div>
<div class="game2">
<img src="images/game8.png">
<p>Book of Gods</p>
</div>
<div class="game2">
<img src="images/game9.png">
<p>Turn Your Fortune</p>
</div>
<div class="game2">
<img src="images/game10.png">
<p>Lighthning Horseman</p>
</div>
<div class="game2">
<img src="images/game5.png">
<p>Jumanji</p>
</div>
<div class="game2">
<img src="images/game6.png">
<p>Ciresele Fantastice</p>
</div>
<div class="game2">
<img src="images/game7.png">
<p>Merii lui Aladin</p>
</div>
<div class="game2">
<img src="images/game8.png">
<p>Mircea cel Batran</p>
</div>
<div class="game2">
<img src="images/game9.png">
<p>Dragnea la Puscarie</p>
</div>
<div class="game2">
<img src="images/game10.png">
<p>Jos PSD</p>
</div>
<div class="game2">
<img src="images/game5.png">
<p>Alt joculet</p>
</div>
<div class="game2">
<img src="images/game6.png">
<p>Lighthning Horseman</p>
</div>
<div class="game2">
<img src="images/game7.png">
<p>Superman</p>
</div>
<div class="game2">
<img src="images/game8.png">
<p>Al Ioan Cuza</p>
</div>
<div class="game2">
<img src="images/game9.png">
<p>Stefan cel Mare</p>
</div>
<div class="game2">
<img src="images/game10.png">
<p>Another game</p>
</div>
<div class="game2">
<img src="images/game5.png">
<p>Miercuri2</p>
</div>
<div class="game2">
<img src="images/game6.png">
<p>Test din Nou</p>
</div>
<div class="game2">
<img src="images/game7.png">
<p>Lighthning Horseman</p>
</div>
</div>
</div>
<div class="game-label">
<p>SELECTED LIVE TABLES</p>
<div class="button-container">
<button type="submit" onclick="gameSliderLeft2()"><</button>
<button type="submit" onclick="gameSliderRight2()">></button>
<a href="#">SEE ALL</a>
</div>
</div>
<div class="game-list2">
<div class="game-list2-wrapper" id="game-list-slider">
<div class="game2">
<img src="images/live1.png">
<p>Live 888 Start</p>
</div>
<div class="game2">
<img src="images/live2.png">
<p>888 Live Roulette</p>
</div>
<div class="game2">
<img src="images/live3.png">
<p>Live 888 Casino Clash</p>
</div>
<div class="game2">
<img src="images/live4.png">
<p>Infinite Blackjack</p>
</div>
<div class="game2">
<img src="images/live5.png">
<p>Live Lightning Roulette</p>
</div>
<div class="game2">
<img src="images/live6.png">
<p>Live Dream Catcher</p>
</div>
<div class="game2">
<img src="images/live1.png">
<p>Live 888 Start</p>
</div>
<div class="game2">
<img src="images/live2.png">
<p>888 Live Roulette</p>
</div>
<div class="game2">
<img src="images/live3.png">
<p>Live 888 Casino Clash</p>
</div>
<div class="game2">
<img src="images/live4.png">
<p>Infinite Blackjack</p>
</div>
<div class="game2">
<img src="images/live5.png">
<p>Live Lightning Roulette</p>
</div>
<div class="game2">
<img src="images/live6.png">
<p>Live Dream Catcher</p>
</div>
<div class="game2">
<img src="images/live6.png">
<p>Live Dream Catcher</p>
</div>
<div class="game2">
<img src="images/live6.png">
<p>Live Dream Catcher</p>
</div>
</div>
</div>
CSS
/* --- Rest of Games --- */
.big-wrapper {
width:90%;
height:100%;
margin: auto;
display: flex;
flex-direction: column;
position: relative;
}
.game-label {
background: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,0.4));
margin-top: 3em;
padding:0.5em 2em;
border-left:2px solid rgb(124,242,55);
}
.game-label p {
display: inline;
color:rgb(124,242,55);
letter-spacing: 2px;
font-weight: bold;
}
.button-container {
float: right;
margin-top: -10px;
}
.button-container button:first-of-type, .button-container button:last-of-type {
width:40px;
background: rgba(0,0,0,0.4);
border:2px solid rgba(0,0,0,0.4);
color:gray;
font-size: 1.3em;
height:40px;
border-radius: 50%;
font-weight: bold;
margin:0 0.5em;
}
.button-container button:first-of-type:hover, .button-container button:last-of-type:hover {
border:2px solid gray;
color:#ffffff;
}
.button-container a {
background: #000000;
border:2px solid #000000;
color:gray;
padding:0.9em 2em;
border-radius: 2em;
text-decoration: none;
font-size: 0.8em;
font-weight: bold;
}
.button-container a:hover {
border:2px solid gray;
color:#ffffff;
}
.game-list2 {
display: flex;
justify-content: space-between;
width:90%;
margin: auto;
margin-top:2em;
position: relative;
overflow: hidden;
height:100%;
}
.game-list2-wrapper {
width:90%;
height:100%;
display: flex;
position: relative;
flex-flow: row nowrap;
transition: 0.5s ease-in;
left:0;
}
.game-list2-wrapper:hover {
left:-2800px;
}
.game-list2-wrapper > .game2:first-of-type {
margin-left: 0;
}
.game2 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: 0.5s all ease;
cursor: pointer;
width:16%;
display: inline-flex;
margin:0 18px;
height:100%;
}
.game2 > p {
color:#ffffff;
}
.game2 > img {
min-width:145px;
}
JS
function gameSliderRight1() {
document.querySelector('.game-list2-wrapper').style.left = "-1400px"
}
function gameSliderLeft1() {
document.querySelector('.game-list2-wrapper').style.transform = "translateX(0px)"
}
function gameSliderRight2() {
document.querySelector('#game-list-slider').style.transform = "translateX(-1400px)"
}
function gameSliderLeft2() {
document.querySelector('#game-list-slider').style.transform = "translateX(0px)"
}