A quotes slideshow is a web component that displays a series of quotes in a sequential manner. Users can either view these quotes automatically or interactively through navigation controls. we'll explore how to create a quotes slideshow using HTML, CSS, and JavaScript.
Approach
- Create a basic HTML document and add a container for the slideshow.
- In the slideshow container add individual quote slides each containing a quote and its author.
- Add navigation buttons (previous and next) for sliding through quotes.
- Style the slideshow container to center it and add padding, background color, box-shadow, and border-radius.
- Style each quote slide to be hidden by default and use transitions for smooth fading.
- Style the quotes and author text for better readability.
- Initialize a variable to keep track of the current slide index.
- Create a function to show slides based on the current index.
- Create a function to handle next and previous button clicks, updating the current slide index accordingly.
- Create a function to automatically cycle through the slides at a set interval.
Example: This example shows the implementation of the above-explained approach.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>GeeksForGeeks Quotes Slideshow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slideshow-container">
<h2 class="slideshow-heading">
GeeksForGeeks Quotes Slideshow</h2>
<div class="quote-slide fade">
<blockquote>
"The best way to predict
the future is to invent it."
</blockquote>
<footer>- Alan Kay</footer>
</div>
<div class="quote-slide fade">
<blockquote>"Success usually
comes to those who are too busy to
be looking for it."</blockquote>
<footer>- Henry David Thoreau</footer>
</div>
<div class="quote-slide fade">
<blockquote>"Don’t watch the
clock; do what it does. Keep
going."</blockquote>
<footer>- Sam Levenson</footer>
</div>
<div class="quote-slide fade">
<blockquote>"The only way to
do great work is to love
what you do."</blockquote>
<footer>- Steve Jobs</footer>
</div>
<div class="quote-slide fade">
<blockquote>"Act as if what
you do makes a difference.
It does."</blockquote>
<footer>- William James</footer>
</div>
<div class="quote-slide fade">
<blockquote>"The future belongs
to those who believe in the
beauty of their dreams."</blockquote>
<footer>- Eleanor Roosevelt</footer>
</div>
<div class="quote-slide fade">
<blockquote>"You miss 100%
of the shots you don’t take."</blockquote>
<footer>- Wayne Gretzky</footer>
</div>
<div class="quote-slide fade">
<blockquote>"The only limit
to our realization of tomorrow
is our doubts of today."</blockquote>
<footer>- Franklin D. Roosevelt</footer>
</div>
<div class="quote-slide fade">
<blockquote>"The only way to do
great work is to love what you do."</blockquote>
<footer>- Steve Jobs</footer>
</div>
<div class="quote-slide fade">
<blockquote>"In the end, we will
remember not the words of our
enemies, but the silence of our friends."
</blockquote>
<footer>- Martin Luther King Jr.</footer>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.slideshow-container {
position: relative;
max-width: 800px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.slideshow-heading {
text-align: center;
color: #28a745;
/* Green color */
margin-bottom: 20px;
}
.quote-slide {
display: none;
text-align: center;
padding: 20px;
}
.quote-slide blockquote {
font-size: 1.5em;
margin: 0;
color: #333;
line-height: 1.5;
word-wrap: break-word;
/* Ensure long words break */
}
.quote-slide footer {
color: #007bff;
/* Blue color for contrast */
font-style: italic;
margin-top: 10px;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: background-color 0.3s ease;
border-radius: 50%;
background-color: #28a745;
/* Green color */
border: none;
z-index: 1000;
transform: translateY(-50%);
/* Center vertically */
}
.next {
right: 0;
}
.prev:hover,
.next:hover {
background-color: #218838;
/* Darker green on hover */
}
@media screen and (max-width: 768px) {
.prev,
.next {
padding: 12px;
font-size: 16px;
}
}
let slideIndex = 0;
function showSlides() {
const slides = document
.querySelectorAll('.quote-slide');
slides.forEach((slide, index) => {
slide.style.display =
(index === slideIndex) ? 'block' : 'none';
});
}
function plusSlides(n) {
const slides = document
.querySelectorAll('.quote-slide');
slideIndex = (slideIndex
+ n + slides.length) % slides.length;
showSlides();
}
document
.addEventListener('DOMContentLoaded', () => {
showSlides();
// Show the first slide
setInterval(() => plusSlides(1), 5000);
// Change slides every 5 seconds
});
Output:
