Slideshow

**ali123** · 05-03-2016, 04:44 PM

Hi I am trying to make a slideshow with 6 images in a row that slide to the next image every 2 seconds but I can't figure out how. I am only able to it with 1 image. Here is the code I am using atm:

Code:

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    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);
}

Thanks for reading and I hope someone can help me

**Sempervivum** · 05-03-2016, 05:23 PM

Your code works perfectly for me. Did you place the script below the image to slide? If not the elements are not yet ready.

**ali123** · 05-03-2016, 05:35 PM

Yeah I know the code is working fine for a 1 image slide show. But i am trying to make it 6 width so that 6 images slide to the next image. Thanks for the fast respond tho

**Sempervivum** · 05-03-2016, 05:51 PM

Six images side by side? And each sliding at the same time?

**ali123** · 05-03-2016, 06:28 PM

^^yeah

**Sempervivum** · 05-03-2016, 07:16 PM

Try this:

Code:

        <span class="slideContainer">
            <img class="mySlides" src="bilder/1.jpg">
            <img class="mySlides" src="bilder/2.jpg">
            <img class="mySlides" src="bilder/1.jpg">
            <img class="mySlides" src="bilder/2.jpg">
        </span>
        <span class="slideContainer">
            <img class="mySlides" src="bilder/1.jpg">
            <img class="mySlides" src="bilder/2.jpg">
            <img class="mySlides" src="bilder/1.jpg">
            <img class="mySlides" src="bilder/2.jpg">
        </span>
        <script>
            var myIndex = 1;
            carousel();

            function carousel() {
                var containers = document.getElementsByClassName("slideContainer");
                for (var i = 0; i < containers.length; i++ ) {
                    var slides = containers[i].getElementsByClassName("mySlides");
                    for (var j = 0; j < slides.length; j++) {
                        slides[j].style.display = "none";
                    }
                    slides[myIndex - 1].style.display = "block";
                }
                myIndex++;
                if (myIndex > slides[0].length) {
                    myIndex = 1
                }
                setTimeout(carousel, 2000);
            }
        </script>

**ali123** · 05-03-2016, 07:26 PM

Thank you very much man that worked good

**ali123** · 05-03-2016, 09:06 PM

Got 1 little problem now the show stops when it got a full round is there a way to keep it going?

**Sempervivum** · 05-03-2016, 10:19 PM

Sorry, there is an error:

Code:

            function carousel() {
                var containers = document.getElementsByClassName("slideContainer");
                for (var i = 0; i < containers.length; i++ ) {
                    var slides = containers[i].getElementsByClassName("mySlides");
                    for (var j = 0; j < slides.length; j++) {
                        slides[j].style.display = "none";
                    }
                    slides[myIndex - 1].style.display = "block";
                }
                myIndex++;
                if (myIndex > slides[0].length) { // error here
                    myIndex = 1
                }
                setTimeout(carousel, 2000);
            }

This is correct:

Code:

if (myIndex > slides.length)

Note, that there is a limitation in this script: All slideshows must have the same number of images.

**ali123** · 05-03-2016, 11:43 PM

Hi thanks you are the best

. Luckely that is exactly what I want so thats no problem for me.

Thread: Slideshow

Thread Tools

Rate This Thread

Slideshow

Users who have thanked Sempervivum for this post:

Tags for this Thread

Posting Permissions