goldy19

2 image sliders on the same page and random order images

6 posts in this topic

Hi All!

 

I have two questions. I am still pretty new to Javascript, and I am using the W3.css file. I am trying to accomplish two things that I cannot, and my colleagues cannot figure out.

 

I am taking code that I sourced off of the W3 website.

 

The two things that I am trying to do is to have two image sliders on the same page that run at the same time, and the second thing is to have the images be in a random order. The only javascript that is running is for the second image slider.

 

Any assistance would be wonderful!

 

I am attaching a .zip of the files.

 

Thank you in advance!

 

Trevor

demo.zip

Share this post


Link to post
Share on other sites

It sounds like you're re-using IDs or something like that, although I haven't downloaded your zip file, extracted everything, and looked for code. It would be better to just post the code here instead of a zip file. Every ID on a page needs to be unique though, 2 elements can't share one ID. My guess is that's your problem.

Share this post


Link to post
Share on other sites

The trouble is, you are using duplicate function name calls

plusDivs(1)

showDivs(slideIndex);

showDivs(slideIndex += n);

 

So it runs the last duplicate functions, relating to 'myslides2' class name, slideshow, for quick fix/hack change function and function calling as

 

plusDivs2(1)

showDivs2(slideIndex);

showDivs2(slideIndex += n);

 

for functions related to 'mySlides2' slideshow only.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Less of botch up, uses non duplicate function, you just hve to make sure plusDivs 2nd parameter refers to correct slide show index ref, could automate this but haven't time at moment

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" media="screen" href="styles.css"/>
        <link rel="stylesheet" type="text/css" media="screen" href="w3.css"/>
    </head>
    <body>
        <div id="wrapper">
            <div class="slideshow">
                <div class="w3-content w3-display-container">
                    <img class="mySlides slideshowpics" src="images/field4.jpg">
                    <img class="mySlides slideshowpics" src="images/field1.jpg">
                    <img class="mySlides slideshowpics" src="images/field2.jpg">
                    <img class="mySlides slideshowpics" src="images/field3.jpg">
                    <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1, 0)">❮</a>
                    <a class="w3-btn-floating w3-display-right" onclick="plusDivs(1, 0)">❯</a>
                    <!-- Extra plusDivs parameter refers to first (0) slideshow (start from 0) -->
                </div>

            </div>
            <div class="slideshow">
                <div class="w3-content w3-display-container">
                    <img class="mySlides slideshowpics" src="images/field4.jpg">
                    <img class="mySlides slideshowpics" src="images/field1.jpg">
                    <img class="mySlides slideshowpics" src="images/field2.jpg">
                    <img class="mySlides slideshowpics" src="images/field3.jpg">
                    <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1, 1)">❮</a>
                    <a class="w3-btn-floating w3-display-right" onclick="plusDivs(1, 1)">❯</a>
                    <!-- Extra plusDivs parameter refers to second (1) slideshow (start from 0) -->
                </div>
                <script type="text/javascript">
                    var slideIndex = 1;
                    var z = document.getElementsByClassName("slideshow");
                    for (i = 0; i < z.length; i++) {
                        //set custom data attribute to first current image index
                        z[i].setAttribute("data-currentslide", 1);
                        showDivs(z[i].getAttribute("data-currentslide"), i);
                    }

                    function plusDivs(n, j) {
                        //get custom data attribute value of current image index to slideshow class index j
                        slideIndex = parseInt(z[j].getAttribute("data-currentslide")[0]);
                        showDivs(slideIndex += n, j);
                    }
                    function showDivs(n, j) {
                        var i;
                        var z = document.getElementsByClassName("slideshow")[j];
                        var x = z.getElementsByClassName("mySlides");
                        if (n > x.length) {
                            slideIndex = 1
                        }
                        if (n < 1) {
                            slideIndex = x.length;
                        }
                        //set custom data attribute to current image index
                        z.setAttribute("data-currentslide", slideIndex);
                        for (i = 0; i < x.length; i++) {
                            x[i].style.display = "none";
                        }
                        x[slideIndex - 1].style.display = "block";
                    }
                </script>
            </div>
        </div>
    </body>
</html>

Share this post


Link to post
Share on other sites

To randomize images placed after

var slideIndex = 1;
var z = document.getElementsByClassName("slideshow");

                    var RandomImgsArray = [];
                    
                    //loop through each class slideshow container elements, and then each element with class myslides
                    for (i = 0; i < z.length; i++)
                    {
                        for (j = 0; j < z[i].getElementsByClassName("mySlides").length; j++) {
                            //add src of img element to array
                            RandomImgsArray[j] = z[i].getElementsByClassName("mySlides")[j].src;
                        }
                        //randomize array src values
                        RandomImgsArray.sort(function(a,  {
                            return 0.5 - Math.random();
                        });
                        //loop through randomize src array and overwrite current img src attribute value with randomized array value in current slideshow class container
                        for (j = 0; j < RandomImgsArray.length; j++) {
                            z[i].getElementsByClassName("mySlides")[j].src = RandomImgsArray[j];
                        }
                    }

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now