Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Quotes Slideshow with CSS and JavaScript
On any thoughts and quotes website, you must have seen the quote slideshow that includes the quote, the celeb name who gave the same quote and the slider. This slider allows moving to the left or right slideshow by clicking separate buttons like arrow keys. Let us see how to create a quotes slideshow with CSS and JavaScript.
Set the parent div
The div includes the container for the slideshow, the quotes, and the previous and next buttons as well. The quotes are set using the <h1> elements. The celeb name who gave the same quote is set as a caption which is styled further. All the quotes are set inside child divs −
<div class="slideContainer">
<div class="Slide">
<h1>"Self-belief and hard work will always earn you success."</h1>
<div class="Caption">- Virat Kohli</div>
</div>
<div class="Slide">
<h1>"You don't need a group of superstars, you need a team working together to bring you better results."</h1>
<div class="Caption">-Brian Lara</div>
</div>
<div class="Slide">
<h1>"I am not thinking too far ahead, just want to take it one thing at a time."</h1>
<div class="Caption">-Sachin Tendulkar</div>
</div>
<a class="prevBtn">?</a>
<a class="nextBtn">?</a>
</div>
Set the div for the dots
The dots/ indicators on a slideshow allows you to navigate any slide on the slideshow without clicking the next and previous buttons −
<div style="text-align:center"> <span class="Navdot" onclick="currentSlide(1)"></span> <span class="Navdot" onclick="currentSlide(2)"></span> <span class="Navdot" onclick="currentSlide(3)"></span> </div>
Style the slide container
The div for the container that includes the slideshow has a maximum width. The position is set to relative −
.slideContainer {
max-width: 600px;
margin: 10px;
position: relative;
margin: auto;
}
The caption
The caption i.e., the actual quotes are styled like this. Make it look appealing using the font-weight property −
.Caption {
color: #500070;
font-weight: bold;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 25px;
padding: 8px 12px;
position: absolute;
width: 100%;
text-align: center;
}
Previous and Next button for the slideshow
The slideshow also includes a previous and next button that allows easier navigation. The position is set to absolute. To position both the buttons properly, the right and left properties are used −
prevBtn, .nextBtn {
position: absolute;
top : 50%;
width: auto;
padding: 10px;
background-color: rgb(255, 255, 75);
color: rgb(50, 0, 116);
font-weight: bolder;
font-size: 18px;
}
.nextBtn {
right: -40px;
}
.prevBtn {
left: -40px;
}
Animation for the dots
The dots make navigation easier for every slide in a slideshow. Use the cursor property and set it to pointer so that the user understands that this needs to be clicked for navigation. Also, display it with the inline-block value of the display property. The transition property allows the properties to animate;
.Navdot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: rgb(54, 5, 117);
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
display: inline-block;
margin-top: 30px;
}
Example
To create a quote slideshow with CSS and JavaScript, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
text-align: center;
}
* {
box-sizing: border-box;
}
.Slide {
display: none;
}
img {
vertical-align: middle;
width: 100%;
height: 400px;
}
.slideContainer {
max-width: 600px;
margin: 10px;
position: relative;
margin: auto;
}
.prevBtn, .nextBtn {
position: absolute;
top: 50%;
width: auto;
padding: 10px;
background-color: rgb(255, 255, 75);
color: rgb(50, 0, 116);
font-weight: bolder;
font-size: 18px;
}
.nextBtn {
right: -40px;
}
.prevBtn {
left: -40px;
}
.Caption {
color: #500070;
font-weight: bold;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 25px;
padding: 8px 12px;
position: absolute;
width: 100%;
text-align: center;
}
.Navdot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: rgb(54, 5, 117);
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
display: inline-block;
margin-top: 30px;
}
.selected, .Navdot:hover {
background-color: #d9ff00;
}
@media only screen and (max-width: 450px) {
.prevBtn, .nextBtn, .Caption {
font-size: 16px;
}
}
</style>
</head>
<body>
<h1>Quote slideShow</h1>
<hr />
<div class="slideContainer">
<div class="Slide">
<h1>"Self-belief and hard work will always earn you success."</h1>
<div class="Caption">- Virat Kohli</div>
</div>
<div class="Slide">
<h1>"You don't need a group of superstars, you need a team working together to bring you better results."</h1>
<div class="Caption">-Brian Lara</div>
</div>
<div class="Slide">
<h1>"I am not thinking too far ahead, just want to take it one thing at a time."</h1>
<div class="Caption">-Sachin Tendulkar</div>
</div>
<a class="prevBtn">?</a>
<a class="nextBtn">?</a>
</div>
<br />
<div style="text-align:center">
<span class="Navdot" onclick="currentSlide(1)"></span>
<span class="Navdot" onclick="currentSlide(2)"></span>
<span class="Navdot" onclick="currentSlide(3)"></span>
</div>
<script>
document.querySelector(".prevBtn").addEventListener("click", () => {
changeSlides(-1);
});
document.querySelector(".nextBtn").addEventListener("click", () => {
changeSlides(1);
});
var slideIndex = 1;
showSlides(slideIndex);
function changeSlides(n) {
showSlides((slideIndex += n));
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("Slide");
var dots = document.getElementsByClassName("Navdot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
Array.from(slides).forEach(item => (item.style.display = "none"));
Array.from(dots).forEach(
item => (item.className = item.className.replace(" selected", ""))
);
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " selected";
}
</script>
</body>
</html>
1K+ Views
