I don't really know what I'm doing but been playing with jQuery trying to achieve this. I had the functionality working fine with the exception of occasionally showing the same testimonial twice in a row, which I'm trying to solve. Here is my attempted code which doesn't compute, I'm quite sure it's something obvious that I don't understand! Any help is appreciated.
You can see the intended functionality here in the testimonial footer: https://blue-coast-f4d2bc.webflow.io/contact
function getNumber(previous) {
if (previous === undefined) {
i = Math.floor(Math.random() * 14) + 1;
return i;
}
else {
while {
i = previous;
i = Math.floor(Math.random() * 14) + 1;
}
return i;
}
var quoteNumb = getNumber();
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show');
var footHeight = $('.testimonial-container').height();
$('.testimonial-container').css({'min-height': footHeight + 'px'});
$('.testimonial-container').css({'max-height': footHeight + 'px'});
$(document).ready(function() {
$(".refresh-button").click(function() {
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeOut(1000, function() {
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').removeClass('show');
quoteNumb = getNumber(quoteNumb);
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show');
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeIn(1000);
});
});
});
I'd suggest creating a random sequence that will determine which order the testimonials appear in. This way they will not repeat until all items have appeared.
We start by creating a sequence like 0,1,2,3,4 ... N, then we shuffle it using (in this case) a Fisher-Yates type shuffle.
Once we have our sequence created, getting the next item is easy. In this example, we cycle through all items, then return to the start.
let state = 0;
let sequence = getRandomSequence(1, 6);
function getRandomSequence(start, length) {
return shuffle(generateRange(start, length))
}
function generateRange(start, length) {
return Array.from({ length }, (v,k) => k + start)
}
// Fisher-Yates shuffle
function shuffle(arr) {
arr = [...arr];
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
// Should drop in as a replacement...
function getNumber() {
return sequence[(state++) % sequence.length];
}
quoteNumb = getNumber();
function showNextQuote() {
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeOut(1000, function() {
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').removeClass('show');
quoteNumb = getNumber(quoteNumb);
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show');
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeIn(1000);
});
}
showNextQuote();.footer-testimonial-quote
{
visibility: hidden;
}
.show
{
visibility: visible;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button onclick='showNextQuote()'>
Next quote
</button>
<br><br>
<div class="footer-testimonial-quote">What a great product!</div>
<div class="footer-testimonial-quote">Great product!</div>
<div class="footer-testimonial-quote">Love it</div>
<div class="footer-testimonial-quote">Amazing</div>
<div class="footer-testimonial-quote">Meh</div>
<div class="footer-testimonial-quote">Awesome, would recommend</div> let quotes = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
let state = 0;
let sequence = getRandomSequence(0, quotes.length);
function getRandomSequence(start, length) {
return shuffle(generateRange(start, length))
}
function generateRange(start, length) {
return Array.from({ length }, (v,k) => k + start)
}
// Fisher-Yates shuffle
function shuffle(arr) {
arr = [...arr];
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
function nextInSequence() {
let quoteNumb = quotes[sequence[(state++) % sequence.length]];
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').addClass('show');
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeIn(1000);
}
nextInSequence();
$(document).ready(function() {
$(".refresh-button").click(function() {
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').fadeOut(1000, function() {
$('.footer-testimonial-quote:nth-of-type('+quoteNumb+')').removeClass('show');
nextInSequence();
});
});
});