What is the best way to have several automatic slideshows on a single webpage?

Question

What is the best way to have several automatic slideshows on a single webpage?

Currently, I am exploring the W3 HTML/CSS tutorial on incorporating multiple slideshows into a single page. While the tutorial provides examples for manual navigation of multiple slideshows or a single automatic slideshow, it lacks guidance on setting up multiple automatic slideshows. In an attempt to merge these concepts, ensuring that each slideshow retains its unique index, I encountered difficulty achieving seamless automatic transitions.

If you're interested in the W3 tutorial, you can access it here: https://www.w3schools.com/howto/howto_js_slideshow.asp(https://www.w3schools.com/howto/howto_js_slideshow.asp)

Below is the snippet of code where I tried to modify the implementation to enable automated transitioning of slides:

var slideIndex = [1,1];
/* Assign different CSS classes to members of each slideshow group */
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  n++; /* MY INSERTION */
  x[slideIndex[no]-1].style.display = "block";
  setTimeout(showSlides(n, x), 2000); /* MY ADDITION */
}

The capitalized comment beside the code line signifies my modification to the original tutorial code. Despite experimenting with setInterval and rearranging code blocks, I have yet to achieve the desired functionality.

html css slideshow

Answer 1

Answer №1

With just a few adjustments, you'll be all set. I've also included an option to modify delays, so give it a try:

/* Look for all slideshow containers */
var slideContainers = document.getElementsByClassName("slideshow-container");
/* Get initial variables for each container */
for(let s = 0; s < slideContainers.length; s++) {
    /* Read the new data attribute */        
    var cycle = slideContainers[s].dataset.cycle;
    /* Find all child nodes with the class mySlides */
    var slides = slideContainers[s].querySelectorAll('.mySlides');
    var Index = 0;
    /* Now we can cycle through slides, but this recursive function needs parameters */
    /* slides and cycle remain constant for each container */
    /* slideIndex will increment during each iteration */
    showSlides(slides, Index, cycle);
};

/* Function is similar, but now includes 3 new parameters */
function showSlides(slides, Index, cycle) {
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    };
    Index++;
    if (Index > slides.length) {
        Index = 1
    };
    slides[Index - 1].style.display = "block";
    /* Call the same function with updated parameters and cycle time */
    setTimeout(function() {
        showSlides(slides, Index, cycle)
    }, cycle);
};

* {
    box-sizing: border-box;
}

body {
    font-family: Verdana, sans-serif;
}

.mySlides {
    display: none;
}

img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
    max-width: 320px;
    position: relative;
    margin: auto;
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {
        font-size: 11px
    }
}

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container" data-cycle="2000">

    <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="https://placeimg.com/320/240/animals">
        <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="https://placeimg.com/320/240/nature">
        <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="https://placeimg.com/320/240/people">
        <div class="text">Caption Three</div>
    </div>

</div>

<p>Change image every 3 seconds:</p>

<div class="slideshow-container" data-cycle="3000">

    <div class="mySlides fade">
        <div class="numbertext">1 / 2</div>
        <img src="https://placeimg.com/320/240/animals">
        <div class="text">Caption 1</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 2</div>
        <img src="https://placeimg.com/320/240/nature">
        <div class="text">Caption 2</div>
    </div>

</div>

Also on JSFiddle

Understanding the scope of JavaScript variables is crucial here. Take a moment to explore JS Variables, then delve into JavaScript scope variables where you'll find informative articles like this one or that one.

Answer 2

With just a few adjustments, you'll be all set. I've also included an option to modify delays, so give it a try:

/* Look for all slideshow containers */
var slideContainers = document.getElementsByClassName("slideshow-container");
/* Get initial variables for each container */
for(let s = 0; s < slideContainers.length; s++) {
    /* Read the new data attribute */        
    var cycle = slideContainers[s].dataset.cycle;
    /* Find all child nodes with the class mySlides */
    var slides = slideContainers[s].querySelectorAll('.mySlides');
    var Index = 0;
    /* Now we can cycle through slides, but this recursive function needs parameters */
    /* slides and cycle remain constant for each container */
    /* slideIndex will increment during each iteration */
    showSlides(slides, Index, cycle);
};

/* Function is similar, but now includes 3 new parameters */
function showSlides(slides, Index, cycle) {
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    };
    Index++;
    if (Index > slides.length) {
        Index = 1
    };
    slides[Index - 1].style.display = "block";
    /* Call the same function with updated parameters and cycle time */
    setTimeout(function() {
        showSlides(slides, Index, cycle)
    }, cycle);
};

* {
    box-sizing: border-box;
}

body {
    font-family: Verdana, sans-serif;
}

.mySlides {
    display: none;
}

img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
    max-width: 320px;
    position: relative;
    margin: auto;
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {
        font-size: 11px
    }
}

<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>

<div class="slideshow-container" data-cycle="2000">

    <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="https://placeimg.com/320/240/animals">
        <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="https://placeimg.com/320/240/nature">
        <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="https://placeimg.com/320/240/people">
        <div class="text">Caption Three</div>
    </div>

</div>

<p>Change image every 3 seconds:</p>

<div class="slideshow-container" data-cycle="3000">

    <div class="mySlides fade">
        <div class="numbertext">1 / 2</div>
        <img src="https://placeimg.com/320/240/animals">
        <div class="text">Caption 1</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 2</div>
        <img src="https://placeimg.com/320/240/nature">
        <div class="text">Caption 2</div>
    </div>

</div>

Also on JSFiddle

Understanding the scope of JavaScript variables is crucial here. Take a moment to explore JS Variables, then delve into JavaScript scope variables where you'll find informative articles like this one or that one.

What is the best way to have several automatic slideshows on a single webpage?

Answer №1

Similar questions

The hover effect fails to function properly after altering the background color. The default color setting is transparent

Issue with margin:auto in Internet Explorer 5

Issue with integrating Contact Form 7 HTML into Wordpress

When hovering over a single list item, only the top border will be displayed without affecting the

Support for other languages in Laravel with the Dompdf package

Can you see the visible area tag?

How can I set up a session in order to fetch information from a MySQL table

Why isn't the content of the initial tab in a <section> shown when clicking a link in the side-drawer?

Adjust the message hues upon form submission with Ajax

The CSS opacity property fails to function properly on Google Chrome

Update the page using Ajax without relying on jQuery

The public folder in Node.js is known for its tendency to encounter errors

Developing a perpetually scrolling container within a webpage

Scraping data from Mass Lottery's website with the help of Beautiful Soup

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

What is the best way to display a single instance of a React component that is declared in multiple locations within the app?

Display as selected when the option is chosen

Incorporate a personalized div element for enhanced navigation in Google Maps API V2

Having trouble accessing a fully loaded Wordpress remotely through Wamp

Need help with a countdown function that seems to be stuck in a loop after 12 seconds. Any