I created a code where I can add multiple carousels to a page. I did this by storing the carousel in an array and accessing it by clicking on the previous/next arrows.
I was trying to prevent any repetitive coding on JavaScript but I still found myself copying and pasting the code to get the result I wanted.
The first thing I did was store each carousel in an array with var subGroup. I created a for loop on the previous and next arrows so they could function every time I add a new carousel on the page.
How the carousel is accessed
I created a switch statement where, for example, if the arrows clicked are on the nth carousel it would move the images only on the nth carousel, which is achieved by accessing the array using index position.
I created an ID for each arrow id="prev0" id="next0" id="prev1" etc. so I could store it in var btnPrevId = parseInt(this.id[this.id.length - 1]) in the for loop where it extracts the number from the ID. I then use that variable to index subGroup.
console.log(btnPrevId); // Output equals 0, 1, or 2 when clicked
Adding a new case to the switch statement
The first issue I have is I would have to add a new case if I add a new carousel. I was trying to use an if/else statement where if I clicked on the prev/next arrows on the nth carousel it would then index subGroup[n-1].querySelectorAll(".carousel-cell") but was unsuccessful.
Moving images by storing the position in a variable
The second issue I came across is using the left property to adjust the position through multiple carousels using multiple variables instead of one.var m1 = 0; var m2 = 0; var m3 = 0;
If I use only one variable for every carousel in the switch statement it will position the images starting where the last data value was set. What I wanted to do instead is position the images where the data value was last set for that specific carousel.
Every time I think I figured it out, I come across another issue that I need to fix which has been quite exciting actually. Working on this carousel has helped me better understand Javascript and although this project is technically done, it could be better. This is my first time getting input on a project. I would really appreciate the feedback
var subGroup = document.querySelectorAll(".carousel-subgroup"); var nextBtn = document.querySelectorAll(".carousel-btn-next"); var prevBtn = document.querySelectorAll(".carousel-btn-prev"); var x; var m1 = 0; var m2 = 0; var m3 = 0; // NEXT BUTTON for (x = 0; x < prevBtn.length; x++) { prevBtn[x].addEventListener("click", function() { // Extracted number from the previous buttons id var btnPrevId = parseInt(this.id[this.id.length - 1]); switch (btnPrevId) { case 0: m1--; for (var i of subGroup[btnPrevId].querySelectorAll(".carousel-cell")) { if (m1 == 0) { i.style.left = "0px"; } if (m1 == 1) { i.style.left = "-495px"; } if (m1 < 0) { m1 = 0; } } break; case 1: m2--; for (var i of subGroup[btnPrevId].querySelectorAll(".carousel-cell")) { if (m2 == 0) { i.style.left = "0px"; } if (m2 == 1) { i.style.left = "-495px"; } if (m2 < 0) { m2 = 0; } } break; case 2: m3--; for (var i of subGroup[btnPrevId].querySelectorAll(".carousel-cell")) { if (m3 == 0) { i.style.left = "0px"; } if (m3 == 1) { i.style.left = "-495px"; } if (m3 < 0) { m3 = 0; } } break; default: } }); } // PREVIOUS BUTTON for (x = 0; x < nextBtn.length; x++) { nextBtn[x].addEventListener("click", function() { // Extracted number from the next buttons id var btnNextId = parseInt(this.id[this.id.length - 1]); switch (btnNextId) { case 0: m1++; for (var i of subGroup[btnNextId].querySelectorAll(".carousel-cell")) { if (m1 == 0) { i.style.left = "0px"; } if (m1 == 1) { i.style.left = "-990px"; } if (m1 == 2) { i.style.left = "-1480px"; } if (m1 > 2) { m1 = 2; } } break; case 1: m2++; for (var i of subGroup[btnNextId].querySelectorAll(".carousel-cell")) { if (m2 == 0) { i.style.left = "0px"; } if (m2 == 1) { i.style.left = "-990px"; } if (m2 == 2) { i.style.left = "-1480px"; } if (m2 > 2) { m2 = 2; } } break; case 2: m3++; for (var i of subGroup[btnNextId].querySelectorAll(".carousel-cell")) { if (m3 == 0) { i.style.left = "0px"; } if (m3 == 1) { i.style.left = "-990px"; } if (m3 == 2) { i.style.left = "-1480px"; } if (m3 > 2) { m3 = 2; } } break; default: } }); }.carousel-group { width: 87vw; margin: 1em auto 3em auto; } .carousel-subgroup { overflow-x: hidden; position: relative; } .carousel-flex { display: flex; overflow-x: auto; } .carousel-flex::-webkit-scrollbar { visibility: hidden; } .carousel-cell { Left: 0; position: relative; margin-right: 9em; transition: 0.5s; } .carousel-btn { cursor: pointer; position: absolute; top: 56%; } .carousel-btn-prev {} .carousel-btn-next { left: 99.25%; }<script src="https://kit.fontawesome.com/66a5def521.js"></script> <div class="carousel-group"> <div class="carousel-subgroup fade-down"> <h2>Carousel 1</h2> <div class="carousel-flex"> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=First+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Second+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Third+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Fourth+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Fifth+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Sixth+Text" alt=""> </div> </div> <div class="carousel-btn carousel-btn-prev" id="prev0"> <i class="fas fa-chevron-left"></i> </div> <div class="carousel-btn carousel-btn-next" id="next0"> <i class="fas fa-chevron-right"></i> </div> </div> <div class="carousel-subgroup fade-down"> <h2>Carousel 2</h2> <div class="carousel-flex"> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=First+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Second+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Third+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Fourth+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Fifth+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Sixth+Text" alt=""> </div> </div> <div class="carousel-btn carousel-btn-prev" id="prev1"> <i class="fas fa-chevron-left"></i> </div> <div class="carousel-btn carousel-btn-next" id="next1"> <i class="fas fa-chevron-right"></i> </div> </div> <div class="carousel-subgroup fade-down"> <h2>Carousel 3</h2> <div class="carousel-flex"> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=First+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Second+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Third+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Fourth+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Fifth+Text" alt=""> </div> <div class="carousel-cell"> <img src="https://via.placeholder.com/350x200.png?text=Sixth+Text" alt=""> </div> </div> <div class="carousel-btn carousel-btn-prev" id="prev2"> <i class="fas fa-chevron-left"></i> </div> <div class="carousel-btn carousel-btn-next" id="next2"> <i class="fas fa-chevron-right"></i> </div> </div> </div>
