How to 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>

Updated on: 08-Dec-2023

678 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements