Although it may seem intimidating, a large portion of the code is repetitive. Experiment by clicking on the red buttons.
<body>
<ul id="carousel" class="carousel">
<button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button>
<div id="track" class="track">
<li class="slide1" data-shown="true2" title="true2"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide2" data-shown="false3" title="false3"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
<li class="slide3" data-shown="false1" title="false1"><img src="https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Frajatbhageria%2Ffiles%2F2017%2F09%2Fcode-copy-1200x1200.jpg"></li>
</div>
<button id="moveSlideRight" class="moveSlide moveSlideRight"></button>
</ul>
</body>
<style>
.carousel {
list-style-type: none;
position: relative;
}
.moveSlideLeft {
left: 0px;
}
.moveSlideLeft>img {
width: 10px;
height: 10px;
transform: rotate(180deg);
}
.moveSlide {
margin: none;
padding: none;
width: 20px;
height: 20px;
background-color: red;
border: none;
float: left;
position: absolute;
z-index: 1;
}
.carousel>.track {
margin: none;
padding: none;
left: 0px;
width: 99px;
height: 100px;
overflow: hidden;
position: absolute;
}
.carousel>.track>li[data-shown="false1"] {
transform: translateX(-99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="true2"] {
transform: translateX(0px);
z-index: 2;
transition: transform 1s ease-out;
}
.carousel>.track>li[data-shown="false3"] {
transform: translateX(99px);
z-index: 0;
transition: transform 1s ease-out;
}
.carousel>.track>li>img {
float: left;
width: 99px;
height: 100px;
}
.moveSlideRight {
left: 80px;
}
.moveSlideRight>img {
width: 10px;
height: 10px;
}
</style>
<script>
const left = document.getElementById("moveSlideLeft");
const right = document.getElementById("moveSlideRight");
left.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i=0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 1) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
else if (placeholder == 2) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
right.onclick = function() {
var carouselValues = [];
var tagReferences = document.getElementById("carousel").getElementsByTagName("li");
for (var i=0; i<=2; i++) {
carouselValues[i] = tagReferences[i].dataset.shown;
}
var placeholder;
for (var i = 0; i<=2; i++) {
if (carouselValues[i] == "true2") {
placeholder = i;
break;
}
}
if (placeholder == 0) {
carouselValues[0] = "false1";
carouselValues[1] = "true2";
carouselValues[2] = "false3";
}
else if (placeholder == 1) {
carouselValues[0] = "false3";
carouselValues[1] = "false1";
carouselValues[2] = "true2";
}
else if (placeholder == 2) {
carouselValues[0] = "true2";
carouselValues[1] = "false3";
carouselValues[2] = "false1";
}
for (var i = 0; i<=2; i++) {
tagReferences[i].dataset.shown = carouselValues[i];
tagReferences[i].title = carouselValues[i];
}
}
</script>Only one image is displaying for unknown reasons. The intention is to create a sliding carousel where each click on a button changes the data-shown attribute. Based on this attribute's value, a new slide should appear. Where could the error be?