Slideshow with random pics

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.

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];
}


#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;
}


<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>