Copy link to clipboard
Copied
So I have some boxed in testimonials on a website I am building. I am trying to only show three at a time, and have them automatically alternate or rotate on the screen. I've played with different carousel setups, or even setting it up like a slideshow, but I already have a slideshow on the page, and that seems to throw everything off. Any suggestions, ideas, etc. would be greatly appreciated.
If there is already a post on this, which I am sure there is, I missed it and would welcome a link to said conversation.
Below is some code for loading quotes from a javascript array of objects every 5 seconds:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quotes every 5 seconds</title>
<style>
.quote {
width: 30%;
margin: 0 auto;
border: 1px solid #000;
padding: 20px;
}
.quote blockquote {
margin: 0;
padding: 0;
font-size: 30px;
text-align: center;
}
.quote blockquote span {
margin: 0;
padding: 0;
font-size: 18px;
}
</style>
</head>
<body>
<div class="quote">
<blockquote>
The quick red fox<br>
...
Copy link to clipboard
Copied
Keep it simple. This will load a random quote from a JavaScript array on page reload. You can add more than one quote to each array if desired.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Random quotes on page reload</title>
</head>
<body>
<!--quotes-->
<div class="quote">
<script>
var Quotation=new Array() // do not change this!
Quotation[0] = "\<blockquote>The quick red fox<br>--Ann Ominous</blockquote>"
;
Quotation[1] = "\<blockquote>The lazy brown dog <br>--Ann Ominous</blockquote>";
Quotation[2] = "\<blockquote>The cat in the hat fox<br>--Ann Ominous</blockquote>";
Quotation[3] = "\<blockquote>The night watchman<br>--Ann Ominous</blockquote>";
Quotation[4] = "\<blockquote>A funny thing happened on the way to the forum. <br>--Ann Ominous</blockquote>"
var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();
</script>
</div>
</body>
</html>
Copy link to clipboard
Copied
Hi Nancy, This is great! I can totally work with this. Do you know how I could have these arrays constantly change without reloading the page? for example:
The quick red fox - by: Ann Ominous (shows for 5 seconds, then alternates to...)
The lazy brown dog - by: Ann Ominous (shows for 5 seconds, then alternates to...)
The cat in the hat - by: Ann Ominous (shows for 5 seconds, then alternates to...)
I like the random aspect you put in the Javascript, I didn't even think to go that direction, just need these to alternate constantly.
Copy link to clipboard
Copied
Below is some code for loading quotes from a javascript array of objects every 5 seconds:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quotes every 5 seconds</title>
<style>
.quote {
width: 30%;
margin: 0 auto;
border: 1px solid #000;
padding: 20px;
}
.quote blockquote {
margin: 0;
padding: 0;
font-size: 30px;
text-align: center;
}
.quote blockquote span {
margin: 0;
padding: 0;
font-size: 18px;
}
</style>
</head>
<body>
<div class="quote">
<blockquote>
The quick red fox<br>
<span>Author 1</span>
</blockquote>
</div>
<!-- end quote -->
<script>
const quote = document.querySelector('.quote');
const quotations = [
{quotation: 'The quick red fox', author: 'Author 1'},
{quotation: 'The lazy brown dog', author: 'Author 2'},
{quotation: 'The cat in the hat', author: 'Author 3'},
{quotation: 'The night watchman', author: 'Author 4'},
{quotation: 'A funny thing happened on the way to the forum', author: 'Author 5'},
];
let count = 0;
setInterval(function(){
count++;
if(count === quotations.length) {
count = 0;
}
quote.innerHTML = `
<blockquote>
${quotations[count].quotation}
<br>
<span>${quotations[count].author}</span>
</blockquote>
`;
},
5000);
</script>
</body>
</html>
Copy link to clipboard
Copied
You.....Are.....Amazing
Copy link to clipboard
Copied
Who is marking these responses as correct? The one marked as correct is wrong.
The OP wanted a solution that 'revolved' the quotation every 5 seconds not one that randomly loaded a quotation on each page re-load.
The code provided is out-dated, using old javascript syntax, very poor.
I know you ACP boys and girls like to award points amongst yourselves but seriously even for wrong answers? This forum has reached the gutter and beyond. Its hilariously funny.
Copy link to clipboard
Copied
My apologies, I misread the post. I have now rectified the mistake. Normally I have a tendency to give marks to narcisits before favouring my fellow ACP's. Stuffed up big here.
Copy link to clipboard
Copied
I'm not requesting you to mark my answer as correct - I dont really care who gets the points or is awarded the correct answer, its all meaningless, just dont mark answers which arent correct as being correct, that is mis-leading. Just leave the thread as is if you are unsure as to what is correct, others can make up their own minds as to which response suits them best.
As for being a narcissist - I'm more thorough than most, as you know. If you mark me down for being so then its most likely a personality fault that lies with you, not me. I just attempt to provide the best professional responses I can. Sadly 90% of cretins in this world don't give a shite, I unfortuanately have to deal with them on a daily basis.
Still no worries I'm a forgiver, so have a pleasant day.
Copy link to clipboard
Copied
looks like its already handled before I saw any of this. Thanks for the help. What you sent is correct and finished out my project!