CODEWITHSUNDEEP
javascript
Andrew Lee
Andrew Lee

Reputation: 304

How to make this javascript slider loop to be random

I am building a little project to help understand Javascript better. I was hoping if someone can show me how to make this slider loop I have to be random every time the pbfNext() function is pressed.

I do not need to know the jquery version of this just javascript. Thank you.

Javascript:

var slideIndex = 1;
showSlides(slideIndex);

function pbfNext(n) {
    showSlides(slideIndex += n);
  }

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("worksheet");
    if (n > slides.length) {slideIndex > 1} 
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slides[slideIndex-1].style.display = "block"; 
  }

HTML:

    <div class="worksheet">
        <iframe src="\Users\andrew.lee\Desktop\Publifiedlabs\Admin\Programming\JS-Rand-Worksheets-v1.0\arrays.html" class="pbf-iframe"></iframe>
    </div>
    <div class="worksheet">
            1<iframe src="\Users\andrew.lee\Desktop\Publifiedlabs\Admin\Programming\JS-Rand-Worksheets-v1.0\arrays.html" class="pbf-iframe"></iframe>
    </div>
    <div class="worksheet">
            2<iframe src="\Users\andrew.lee\Desktop\Publifiedlabs\Admin\Programming\JS-Rand-Worksheets-v1.0\arrays.html" class="pbf-iframe"></iframe>
    </div>

Upvotes: 1

Views: 1061

Answers (2)

LBe
LBe

Reputation: 26

pbfNext function:

function pbfNext(n) { //You don't actually need to pass anything into this function
    var numberOfSlides = document.getElementsByClassName("worksheet").length; //Get the number of slides. You need this to create the range of randomness
    var randomSlideNumber = Math.floor(Math.random() * numberOfSlides) //Generate a random number between 0 and 1 * by number of slides then round down. Returns a number between 0 and numberOfSlides-1
    showSlides(randomSlideNumber); //Insert the random number into the showSlides function
}

showSlides function:

function showSlides(n) {
    var slides = document.getElementsByClassName("worksheet");
    for (let i = 0; i < slides.length; i++) { //Cycle through the "slides" elements
        slides[i].style.display = "none"; //Set the display to all of the "slides" elements to none
    }
    slides[n].style.display = "block"; //Set randomly selected "slides" element to block.
  }



Bonus - Prevent a random slide from being picked twice in a row.

Add a new global variable like var previousIndex = null;

var previousIndex = null; //this will keep track of the previous slide

Add the following to the pbfNext function between randomSlideNumber and showSlides(randomSlideNumber)

    //Create a new random number between a range of numbers. 
//Then add the new random to the previous random number to create a new random number.
if (previousIndex === randomSlideNumber){ //Check if current random index is same as the previous index
    let min = randomSlideNumber === 0 ? randomSlideNumber + 1 : randomSlideNumber * -1; // if random number is 0 the minimum is -1 else the minimun is the negetive of the number
    let max = numberOfSlides - randomSlideNumber; //The maximun is the number of slides minus the random
    randomSlideNumber += Math.floor(Math.random() * (max - min) + min); //Generate a random number from the range of min & max and add/subtract from the randomSlideNumber
}
previousIndex = randomSlideNumber;

Upvotes: 1

Sukima
Sukima

Reputation: 10074

Change if (n > slides.length) {slideIndex > 1} to:

if (n >= slides.length) { slideIndex = 0 }

For randomness replace pbfNext function with:

function pbfNext() {
  var randomIndex = Math.floor(Math.random() * slides.length);
  showSlides(randomIndex);
}

Upvotes: 2

Related Questions