I’ve been developing a very simple website with Jekyll with a random carousel on home.
I would like to avoid repetition of image before all images in the stack have been shown.
This is the code I’m using:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.carousel__holder {
width: 100%;
position: relative;
margin-top: 3em;
margin-left: auto;
margin-right: auto;
padding: 5px;
margin: 1rem 0 1rem;
}
.carousel {
max-width: 80%;
max-height: 100%;
object-fit: cover;
margin-left: auto;
margin-right: auto;
overflow: hidden;
text-align: center;
position: absolute;
display: block;
}
.carousel__slide {
max-height: 100%;
max-width: 100%;
opacity: 0;
display: block;
}
.carousel__slide .overlay {height: 100%;}
.carousel--thumb .carousel__indicator {
height: 30px;
width: 30px;
}
</style>
</head>
<body>
<div class="carousel_holder" id="carousel_holder">
{% assign image_files = site.static_files| where: "image", true %}
{% for image in image_files %}
<img src="{{ image.path }}" class="carousel" alt="image">
{% endfor %}
</div>
<script>
let a = [];
for (let i = 0; i < 85; ++i) a[i] = i;
// http://stackoverflow.com/questions/962802#962890
function shuffle(array) {
let tmp, current, top = array.length;
if (top)
while (--top) {
current = Math.floor(Math.random() * (top + 1));
tmp = array[current];
array[current] = array[top];
array[top] = tmp;
}
return array;
}
a = shuffle(a);
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("carousel");
myTimeout = setTimeout(carousel, 1800);
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
a = shuffle(a);
myIndex = 1
}
x[a[myIndex - 1]].style.display = "block";
// COMMENTED AS IT'S NOT A LEGAL FN: document.getElementByClass("thewellContainer").style.color = "transparent";
}
</script>
</body>
Can you please give me some advice on how to implement thi feature on javascript?
Thank you for your help