Jump to content

2 image sliders on the same page and random order images


Recommended Posts

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

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.

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
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>
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];
                        }
                    }
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...