Article Categories

Selected Reading

How to create a quotes slideshow with CSS and JavaScript?

CSS Javascript Web Development Front End Technology

A quotes slideshow is an interactive component that displays inspirational quotes with smooth navigation controls. It combines HTML structure, CSS styling, and JavaScript functionality to create an engaging user experience with previous/next buttons and clickable dot indicators.

Syntax

.slideContainer {
    position: relative;
    max-width: value;
}

.Slide {
    display: none; /* Hide all slides by default */
}

.prevBtn, .nextBtn {
    position: absolute;
    top: 50%;
}

HTML Structure

First, create the HTML structure with a container for slides and navigation buttons −

<div class="slideContainer">
   <div class="Slide">
      <h2>"Self-belief and hard work will always earn you success."</h2>
      <div class="Caption">- Virat Kohli</div>
   </div>
   <div class="Slide">
      <h2>"You don't need a group of superstars, you need a team working together."</h2>
      <div class="Caption">- Brian Lara</div>
   </div>
   <a class="prevBtn">?</a>
   <a class="nextBtn">?</a>
</div>

<div class="dotContainer">
   <span class="Navdot" onclick="currentSlide(1)"></span>
   <span class="Navdot" onclick="currentSlide(2)"></span>
</div>

CSS Styling

Style the slideshow container and slides −

.slideContainer {
   max-width: 600px;
   margin: auto;
   position: relative;
   padding: 20px;
   border: 2px solid #ddd;
   border-radius: 10px;
}

.Slide {
   display: none;
   text-align: center;
   min-height: 200px;
}

.Caption {
   color: #500070;
   font-weight: bold;
   font-size: 18px;
   margin-top: 15px;
}

Navigation Buttons

Style the previous and next buttons for slide navigation −

.prevBtn, .nextBtn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   padding: 10px 15px;
   background-color: #007bff;
   color: white;
   border: none;
   cursor: pointer;
   font-size: 18px;
   border-radius: 5px;
}

.prevBtn { left: -50px; }
.nextBtn { right: -50px; }

.prevBtn:hover, .nextBtn:hover {
   background-color: #0056b3;
}

Dot Indicators

Create clickable dots for direct slide navigation −

.dotContainer {
   text-align: center;
   margin-top: 20px;
}

.Navdot {
   height: 15px;
   width: 15px;
   margin: 0 5px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   cursor: pointer;
   transition: background-color 0.3s;
}

.Navdot:hover, .selected {
   background-color: #007bff;
}

Complete Example

Here's a complete working quotes slideshow −

<!DOCTYPE html>
<html>
<head>
<style>
   * { box-sizing: border-box; }
   
   body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
   }
   
   .slideContainer {
      max-width: 600px;
      margin: auto;
      position: relative;
      background: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   }
   
   .Slide {
      display: none;
      text-align: center;
      min-height: 150px;
      padding: 20px;
   }
   
   .Slide h2 {
      font-size: 24px;
      color: #333;
      font-style: italic;
      margin-bottom: 20px;
   }
   
   .Caption {
      color: #007bff;
      font-weight: bold;
      font-size: 18px;
   }
   
   .prevBtn, .nextBtn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 12px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 20px;
      border-radius: 50%;
      transition: background-color 0.3s;
   }
   
   .prevBtn { left: -25px; }
   .nextBtn { right: -25px; }
   
   .prevBtn:hover, .nextBtn:hover {
      background-color: #0056b3;
   }
   
   .dotContainer {
      text-align: center;
      margin-top: 20px;
   }
   
   .Navdot {
      height: 15px;
      width: 15px;
      margin: 0 5px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      cursor: pointer;
      transition: background-color 0.3s;
   }
   
   .Navdot:hover, .selected {
      background-color: #007bff;
   }
</style>
</head>
<body>
   <h1 style="text-align: center; color: #333;">Inspirational Quotes</h1>
   
   <div class="slideContainer">
      <div class="Slide">
         <h2>"Self-belief and hard work will always earn you success."</h2>
         <div class="Caption">- Virat Kohli</div>
      </div>
      
      <div class="Slide">
         <h2>"You don't need superstars, you need a team working together."</h2>
         <div class="Caption">- Brian Lara</div>
      </div>
      
      <div class="Slide">
         <h2>"I am not thinking too far ahead, just taking it one thing at a time."</h2>
         <div class="Caption">- Sachin Tendulkar</div>
      </div>
      
      <button class="prevBtn">?</button>
      <button class="nextBtn">?</button>
   </div>
   
   <div class="dotContainer">
      <span class="Navdot" onclick="currentSlide(1)"></span>
      <span class="Navdot" onclick="currentSlide(2)"></span>
      <span class="Navdot" onclick="currentSlide(3)"></span>
   </div>

<script>
   let slideIndex = 1;
   showSlides(slideIndex);

   document.querySelector('.prevBtn').onclick = () => changeSlide(-1);
   document.querySelector('.nextBtn').onclick = () => changeSlide(1);

   function changeSlide(n) {
      showSlides(slideIndex += n);
   }

   function currentSlide(n) {
      showSlides(slideIndex = n);
   }

   function showSlides(n) {
      const slides = document.querySelectorAll('.Slide');
      const dots = document.querySelectorAll('.Navdot');
      
      if (n > slides.length) slideIndex = 1;
      if (n < 1) slideIndex = slides.length;
      
      slides.forEach(slide => slide.style.display = 'none');
      dots.forEach(dot => dot.classList.remove('selected'));
      
      slides[slideIndex - 1].style.display = 'block';
      dots[slideIndex - 1].classList.add('selected');
   }
</script>
</body>
</html>

A styled quotes slideshow appears with three inspirational quotes. Navigation arrows on the sides allow cycling through quotes, and three clickable dots below provide direct access to any quote. The active quote is highlighted with a blue dot indicator.

Conclusion

Creating a quotes slideshow combines CSS positioning for layout, JavaScript for interactivity, and smooth transitions for professional presentation. This component enhances user engagement with intuitive navigation controls and responsive design.

AmitDiwan

Updated on: 2026-03-15T15:13:25+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next