Slideshow with random pics

Question

So I made this little Slideshow with HTML/CSS/JS and I want to make it so that the 6 images appear randomly and not 1,2,3.. more like 2,3,1.. for example. Any help is appreciated. Many thanks in advance.

JS:

var imagecount = 1;
var total = 6;

function slide(x) {
    var Image = document.getElementById('img');
    imagecount = imagecount + x;
    if(imagecount > total){imagecount = 1;}
    if(imagecount < 1){imagecount = total;}
    Image.src = "images/img"+ imagecount +".jpg";
    ChangeText(imagecount);
}

window.setInterval(function slideA(x) {
    var Image = document.getElementById('img');
    imagecount = imagecount + 1;
    if(imagecount > total){imagecount = 1;}
    if(imagecount < 1){imagecount = total;}
    Image.src = "images/img"+ imagecount +".jpg";
    ChangeText(imagecount);
}, 3000);

function ChangeText(imgNum){
    var allImagesAndText = {1: "Seltene römische Goldmünze", 2: "Römische Funde", 3: "Römische Wandmalerei", 4: "Tutanchamun", 5: "Cheops Pyramide", 6: "Ägyptische Malerei"};
    document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}

CSS:

#container {
  height: 450px;
  width: 650px;
  margin: 20px auto;
  position: relative;
  z-index: 1;
  border: 10px solid #000;
  border-radius: 10px;
}
#img {
  height: 450px;
  width: 650px;
}
#left_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  left: 0px;
  top: 0px;
}
#right_holder {
  height: 450px;
  width: 100px;
  position: absolute;
  right: 0px;
  top: 0px;
}
.left {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  left: 0px;
}
.right {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 40%;
  right: 0px;
}
#text1 {
  position: absolute;
  color: #fff;
  font-size: 32px;
  background-color: #000;
  opacity: 0.5;
  left: 37%;
  z-index: 2;
}

HTML:

<div id="container">
  <div id="text1">Text</div>
  <img src="images/img1.jpg" id="img" />
  <div id="left_holder">
    <img onClick="slide(-1)" class="left" src="images/arrow_left.png" />
  </div>
  <div id="right_holder">
    <img onClick="slide(1)" class="right" src="images/arrow_right.png" />
  </div>
</div>

score 1 · Answer 1 · answered Jul 18 '16 at 11:15

1

You can add a function:-

    function generateRandom(){
        var x = Math.floor((Math.random() * 6) + 1); //generates random number from 1 to 6
        return x;
    }

And then call this function and use appropriately

answered Jul 18 '16 at 11:15

Soham Banerjee

15
6

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

You can create unique random image slider. So it doesn't repeat image multiple times (Soham's answer is fine but it will repeat same image multiple times in a row).

Something like this:

var imagecount = 1;
var total = 6;
var uniqueRandoms = [];

function makeUniqueRandom() {
    if (!uniqueRandoms.length) {
        for (var i = imagecount; i <= total; i++) {
            uniqueRandoms.push(i);
        }
    }
    var index = Math.floor(Math.random() * uniqueRandoms.length);
    var val = uniqueRandoms[index];

    uniqueRandoms.splice(index, 1);

    return val;
}

I used this SO answer.

And then in your code just call that function where you need it.

Example with your code just for autoslide is here https://jsfiddle.net/2gra4wk1/

edited May 23 '17 at 12:14

Community

1
1

answered Jul 18 '16 at 11:32

Jakob

3,493
4
26
42

thank you for the answer it worked. i have another question how do i make it so if i press the right or left arrow key it stops the autoslide and just changes a pic if i press an arrow? and then keeps on changing pics after for example 3 seconds after i didnt press an arrow? – CuttingTheAces Jul 18 '16 at 11:42
well, you can use same random function with your `slide()` function and on click use `setTimeout` for basic autoslide. Problem with this will be that you will get random image on both previous and next button click so you need to store previous images and then access them on previous button click. But these functions are beyond this question so try to do it yourself or ask new question if you are stuck :) – Jakob Jul 18 '16 at 12:15

Slideshow with random pics

2 Answers2