As I continue learning how to code, I've encountered an issue with my website project. I'm trying to incorporate multiple image sliders, but only the first one is functioning properly. The images on the other sliders are not displaying. I suspect that I may be missing some essential code to make them work collectively, but I'm unsure of what exactly is needed. The provided code snippet shows how to create a slider, and I wonder how I can apply this code to generate multiple working sliders in a single HTML file. For instance, duplicating the slider and inserting it into the same file with different images while ensuring all sliders function as intended. Any assistance would be greatly appreciated.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n){
showSlides(slideIndex += n);
}
function currentSlide(n){
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++){
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++){
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.slideshowContainer{
width: 43.2em;
height: 23.15em;
margin-top: 1.5em;
margin-left: 1.5em;
background-color: #FFF;
box-shadow: -0.05em 0em 0.5em 0.05em rgba(0,0,0,0.4);
/* Other CSS properties */
}
.mySlides{
display: none;
}
/* Additional CSS code snippets here */
<!-- HTML code for slideshow -->
<!-- Duplicate this section to create additional sliders -->
<div class="slideshowContainer">
<!-- Slide content -->
<!-- Include multiple 'mySlides' div elements with respective images -->
<!-- Add navigation buttons and dots accordingly -->
</div>