HTML Page to Display Multiple Slideshows

Question

Goal: To create an HTML page that displays 6 slideshows to be displayed on a large display. Each slideshow will use the same batch of images as it will be showing off product and product information in a showroom. This is for internal use only and will be loaded and just keep looping so if load times are a little slow it is not the end of the world.

What I Have Done: I created the basic layout for the page and found some basic JavaScript from W3 Schools to create a slideshow. The code from W3 Schools is only designed for a single slideshow per page. To get around this I found multiple posts that suggested duplicating the script and creating a new class to use for each script.

Problems: When I duplicated the script only one of the slideshows works correctly. The other problem I can see with this is the code for the page getting out of hand with 6 copies of the same script and having to include each image in every location a slideshow will run.

Where I Need Help: Is there a cleaner way of handling the JavaScript for running that many slideshows? I am not familiar with JavaScript but I would think there is a good way to handle that so that 6 copies of the same script are not needed.

Other Information: If there is a better solution that anyone has seen I am not opposed to ditching the HTML page option. The current code that I have is listed below. If there is any information that I am missing or any clarification needed please let me know.

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
    .mySlides1 {display:none;}
    .mySlides2 {display:none;}
</style>

<body>

<!--Top Row-->
<div class="w3-cell-row">
    <div class="w3-yellow w3-cell w3-third">
        <img class="mySlides1" src="img1.jpg" style="width:100%">
        <img class="mySlides1" src="img2.jpg" style="width:100%">
        <img class="mySlides1" src="img3.jpg" style="width:100%">
    </div>
    <div class="w3-green w3-cell w3-third">
        <p>Top Center</p>
    </div>
    <div class="w3-blue w3-cell w3-third">
        <p>Top Right Corner</p>
    </div> 
</div>

<!--Bottom Row-->
<div class="w3-cell-row">
    <div class="w3-red w3-cell w3-third">
        <p>Bottom Left Corner</p>
    </div>
    <div class="w3-purple w3-cell w3-third">
        <img class="mySlides2" src="img4.jpg" style="width:100%">
        <img class="mySlides2" src="img5.jpg" style="width:100%">
        <img class="mySlides2" src="img6.jpg" style="width:100%">
    </div>
    <div class="w3-amber w3-cell w3-third">
        <p>Bottom Right Corner</p>
    </div>
</div>

<!--Script for first slideshow-->
<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides1");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
<!--Script for second slideshow-->
<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides2");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

</body>
</html>

Update: Thank you for the feedback. Using the feedback from @helb I was able to modify the JavaScript to get multiple slideshows running on the same page. I have posted the updated JavaScript for reference.

function carousel(className, slideStart) {
    var i;
    var myIndex = slideStart;
    var x = document.getElementsByClassName(className);
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000, className, myIndex); // Change image every 2 seconds
}

carousel("show1", 0);
carousel("show2", 3);

Answer 1

Yes, just take the class name as an argument for your function:

function carousel(className) {
    var i;
    var x = document.getElementsByClassName(className);
    // …
}

carousel("mySlides1");
carousel("mySlides2");

Defining functions in JS: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions

If you just "want a carousel" without learning stuff to create your own, use a ready-made one. OwlCarousel2 recommended by @Kamelkent looks good. My personal favorite is Siema .

HTML Page to Display Multiple Slideshows

Question

1 answers

solution1
0 ACCPTED 2017-11-03 15:07:08

HTML Page to Display Multiple Slideshows

Question

1 answers

solution1 0 ACCPTED 2017-11-03 15:07:08

solution1
0 ACCPTED 2017-11-03 15:07:08