Testimonial Slider using css | Testimonial Slider code – codewithrandom

by







Testimonial Slider using css | Testimonial Slider – codewithrandom

 Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Testimonial Slider. We use HTML, Css, and javascript for this Testimonial Slider. Hope you enjoy our blog so let’s start with a basic HTML structure for a Testimonial Slider. 

HTML code

  <body>  
   <section id="testim" class="testim">  
    <!--     <div class="testim-cover"> -->  
    <div class="wrap">  
     <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>  
     <span id="left-arrow" class="arrow left fa fa-chevron-left"></span>  
     <ul id="testim-dots" class="dots">  
      <li class="dot active"></li>  
      <!--  
               -->  
      <li class="dot"></li>  
      <!--  
               -->  
      <li class="dot"></li>  
      <!--  
               -->  
      <li class="dot"></li>  
      <!--  
               -->  
      <li class="dot"></li>  
     </ul>  
     <div id="testim-content" class="cont">  
      <div class="active">  
       <div class="img">  
        <img  
         src="https://source.unsplash.com/1600x900/?nature,water"  
         alt=""  
        />  
       </div>  
       <h2>Lorem P. Ipsum</h2>  
       <p>  
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut  
        enim ad minim veniam, quis nostrud exercitation ullamco.  
       </p>  
      </div>  
      <div>  
       <div class="img">  
        <img  
         src="https://source.unsplash.com/1600x900/?nature,water"  
         alt=""  
        />  
       </div>  
       <h2>Mr. Lorem Ipsum</h2>  
       <p>  
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut  
        enim ad minim veniam, quis nostrud exercitation ullamco.  
       </p>  
      </div>  
      <div>  
       <div class="img">  
        <img  
         src="https://source.unsplash.com/1600x900/?nature,water"  
         alt=""  
        />  
       </div>  
       <h2>Lorem Ipsum</h2>  
       <p>  
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut  
        enim ad minim veniam, quis nostrud exercitation ullamco.  
       </p>  
      </div>  
      <div>  
       <div class="img">  
        <img  
         src="https://source.unsplash.com/1600x900/?nature,water"  
         alt=""  
        />  
       </div>  
       <h2>Lorem De Ipsum</h2>  
       <p>  
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut  
        enim ad minim veniam, quis nostrud exercitation ullamco.  
       </p>  
      </div>  
      <div>  
       <div class="img">  
        <img  
         src="https://source.unsplash.com/1600x900/?nature,water"  
         alt=""  
        />  
       </div>  
       <h2>Ms. Lorem R. Ipsum</h2>  
       <p>  
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut  
        enim ad minim veniam, quis nostrud exercitation ullamco.  
       </p>  
      </div>  
     </div>  
    </div>  
    <!--     </div> -->  
   </section>  
   <script src="https://use.fontawesome.com/1744f3f671.js"></script>  
  </body>

There is all HTML code for the Testimonial Slider. Now, you can see output without CSS, then we write CSS the Testimonial Slider.

output

Testimonial Slider using css | Testimonial Slider code - codewithrandom

Testimonial Slider using css | Testimonial Slider code - codewithrandom


CSS Code

 @import url(//cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-font.css);  
 *,  
 *:after,  
 *:before {  
   margin: 0;  
   padding: 0;  
   -webkit-box-sizing: border-box;  
   -moz-box-sizing: border-box;  
   -ms-box-sizing: border-box;  
   -o-box-sizing: border-box;  
   box-sizing: border-box;  
   -webkit-user-select: none;  
   -ms-user-select: none;  
   -o-user-select: none;  
   -moz-user-select: none;  
   user-select: none;  
   cursor: default;  
 }  
 html {  
   width: 100%;  
   height: auto;  
 }  
 body {  
   width: 100%;  
   height: auto;  
   font-size: 16px;  
   font-family: Dubai-Light;  
           background: rgba(30,30,30);  
 }  
 .testim {  
           width: 100%;  
           position: absolute;  
           top: 50%;  
           -webkit-transform: translatey(-50%);  
           -moz-transform: translatey(-50%);  
           -ms-transform: translatey(-50%);  
           -o-transform: translatey(-50%);  
           transform: translatey(-50%);  
 }  
 .testim .wrap {  
   position: relative;  
   width: 100%;  
   max-width: 1020px;  
   padding: 40px 20px;  
   margin: auto;  
 }  
 .testim .arrow {  
   display: block;  
   position: absolute;  
   color: #eee;  
   cursor: pointer;  
   font-size: 2em;  
   top: 50%;  
   -webkit-transform: translateY(-50%);  
           -ms-transform: translateY(-50%);  
           -moz-transform: translateY(-50%);  
           -o-transform: translateY(-50%);  
           transform: translateY(-50%);  
   -webkit-transition: all .3s ease-in-out;    
   -ms-transition: all .3s ease-in-out;    
   -moz-transition: all .3s ease-in-out;    
   -o-transition: all .3s ease-in-out;    
   transition: all .3s ease-in-out;  
   padding: 5px;  
   z-index: 22222222;  
 }  
 .testim .arrow:before {  
           cursor: pointer;  
 }  
 .testim .arrow:hover {  
   color: #ea830e;  
 }  
 .testim .arrow.left {  
   left: 10px;  
 }  
 .testim .arrow.right {  
   right: 10px;  
 }  
 .testim .dots {  
   text-align: center;  
   position: absolute;  
   width: 100%;  
   bottom: 60px;  
   left: 0;  
   display: block;  
   z-index: 3333;  
           height: 12px;  
 }  
 .testim .dots .dot {  
   list-style-type: none;  
   display: inline-block;  
   width: 12px;  
   height: 12px;  
   border-radius: 50%;  
   border: 1px solid #eee;  
   margin: 0 10px;  
   cursor: pointer;  
   -webkit-transition: all .5s ease-in-out;    
   -ms-transition: all .5s ease-in-out;    
   -moz-transition: all .5s ease-in-out;    
   -o-transition: all .5s ease-in-out;    
   transition: all .5s ease-in-out;  
           position: relative;  
 }  
 .testim .dots .dot.active,  
 .testim .dots .dot:hover {  
   background: #ea830e;  
   border-color: #ea830e;  
 }  
 .testim .dots .dot.active {  
   -webkit-animation: testim-scale .5s ease-in-out forwards;    
   -moz-animation: testim-scale .5s ease-in-out forwards;    
   -ms-animation: testim-scale .5s ease-in-out forwards;    
   -o-animation: testim-scale .5s ease-in-out forwards;    
   animation: testim-scale .5s ease-in-out forwards;    
 }  
 .testim .cont {  
   position: relative;  
           overflow: hidden;  
 }  
 .testim .cont > div {  
   text-align: center;  
   position: absolute;  
   top: 0;  
   left: 0;  
   padding: 0 0 70px 0;  
   opacity: 0;  
 }  
 .testim .cont > div.inactive {  
   opacity: 1;  
 }  
 .testim .cont > div.active {  
   position: relative;  
   opacity: 1;  
 }  
 .testim .cont div .img img {  
   display: block;  
   width: 100px;  
   height: 100px;  
   margin: auto;  
   border-radius: 50%;  
 }  
 .testim .cont div h2 {  
   color: #ea830e;  
   font-size: 1em;  
   margin: 15px 0;  
 }  
 .testim .cont div p {  
   font-size: 1.15em;  
   color: #eee;  
   width: 80%;  
   margin: auto;  
 }  
 .testim .cont div.active .img img {  
   -webkit-animation: testim-show .5s ease-in-out forwards;        
   -moz-animation: testim-show .5s ease-in-out forwards;        
   -ms-animation: testim-show .5s ease-in-out forwards;        
   -o-animation: testim-show .5s ease-in-out forwards;        
   animation: testim-show .5s ease-in-out forwards;        
 }  
 .testim .cont div.active h2 {  
   -webkit-animation: testim-content-in .4s ease-in-out forwards;    
   -moz-animation: testim-content-in .4s ease-in-out forwards;    
   -ms-animation: testim-content-in .4s ease-in-out forwards;    
   -o-animation: testim-content-in .4s ease-in-out forwards;    
   animation: testim-content-in .4s ease-in-out forwards;    
 }  
 .testim .cont div.active p {  
   -webkit-animation: testim-content-in .5s ease-in-out forwards;    
   -moz-animation: testim-content-in .5s ease-in-out forwards;    
   -ms-animation: testim-content-in .5s ease-in-out forwards;    
   -o-animation: testim-content-in .5s ease-in-out forwards;    
   animation: testim-content-in .5s ease-in-out forwards;    
 }  
 .testim .cont div.inactive .img img {  
   -webkit-animation: testim-hide .5s ease-in-out forwards;        
   -moz-animation: testim-hide .5s ease-in-out forwards;        
   -ms-animation: testim-hide .5s ease-in-out forwards;        
   -o-animation: testim-hide .5s ease-in-out forwards;        
   animation: testim-hide .5s ease-in-out forwards;        
 }  
 .testim .cont div.inactive h2 {  
   -webkit-animation: testim-content-out .4s ease-in-out forwards;      
   -moz-animation: testim-content-out .4s ease-in-out forwards;      
   -ms-animation: testim-content-out .4s ease-in-out forwards;      
   -o-animation: testim-content-out .4s ease-in-out forwards;      
   animation: testim-content-out .4s ease-in-out forwards;      
 }  
 .testim .cont div.inactive p {  
   -webkit-animation: testim-content-out .5s ease-in-out forwards;    
   -moz-animation: testim-content-out .5s ease-in-out forwards;    
   -ms-animation: testim-content-out .5s ease-in-out forwards;    
   -o-animation: testim-content-out .5s ease-in-out forwards;    
   animation: testim-content-out .5s ease-in-out forwards;    
 }  
 @-webkit-keyframes testim-scale {  
   0% {  
     -webkit-box-shadow: 0px 0px 0px 0px #eee;  
     box-shadow: 0px 0px 0px 0px #eee;  
   }  
   35% {  
     -webkit-box-shadow: 0px 0px 10px 5px #eee;      
     box-shadow: 0px 0px 10px 5px #eee;      
   }  
   70% {  
     -webkit-box-shadow: 0px 0px 10px 5px #ea830e;      
     box-shadow: 0px 0px 10px 5px #ea830e;      
   }  
   100% {  
     -webkit-box-shadow: 0px 0px 0px 0px #ea830e;      
     box-shadow: 0px 0px 0px 0px #ea830e;      
   }  
 }  
 @-moz-keyframes testim-scale {  
   0% {  
     -moz-box-shadow: 0px 0px 0px 0px #eee;  
     box-shadow: 0px 0px 0px 0px #eee;  
   }  
   35% {  
     -moz-box-shadow: 0px 0px 10px 5px #eee;      
     box-shadow: 0px 0px 10px 5px #eee;      
   }  
   70% {  
     -moz-box-shadow: 0px 0px 10px 5px #ea830e;      
     box-shadow: 0px 0px 10px 5px #ea830e;      
   }  
   100% {  
     -moz-box-shadow: 0px 0px 0px 0px #ea830e;      
     box-shadow: 0px 0px 0px 0px #ea830e;      
   }  
 }  
 @-ms-keyframes testim-scale {  
   0% {  
     -ms-box-shadow: 0px 0px 0px 0px #eee;  
     box-shadow: 0px 0px 0px 0px #eee;  
   }  
   35% {  
     -ms-box-shadow: 0px 0px 10px 5px #eee;      
     box-shadow: 0px 0px 10px 5px #eee;      
   }  
   70% {  
     -ms-box-shadow: 0px 0px 10px 5px #ea830e;      
     box-shadow: 0px 0px 10px 5px #ea830e;      
   }  
   100% {  
     -ms-box-shadow: 0px 0px 0px 0px #ea830e;      
     box-shadow: 0px 0px 0px 0px #ea830e;      
   }  
 }  
 @-o-keyframes testim-scale {  
   0% {  
     -o-box-shadow: 0px 0px 0px 0px #eee;  
     box-shadow: 0px 0px 0px 0px #eee;  
   }  
   35% {  
     -o-box-shadow: 0px 0px 10px 5px #eee;      
     box-shadow: 0px 0px 10px 5px #eee;      
   }  
   70% {  
     -o-box-shadow: 0px 0px 10px 5px #ea830e;      
     box-shadow: 0px 0px 10px 5px #ea830e;      
   }  
   100% {  
     -o-box-shadow: 0px 0px 0px 0px #ea830e;      
     box-shadow: 0px 0px 0px 0px #ea830e;      
   }  
 }  
 @keyframes testim-scale {  
   0% {  
     box-shadow: 0px 0px 0px 0px #eee;  
   }  
   35% {  
     box-shadow: 0px 0px 10px 5px #eee;      
   }  
   70% {  
     box-shadow: 0px 0px 10px 5px #ea830e;      
   }  
   100% {  
     box-shadow: 0px 0px 0px 0px #ea830e;      
   }  
 }  
 @-webkit-keyframes testim-content-in {  
   from {  
     opacity: 0;  
     -webkit-transform: translateY(100%);  
     transform: translateY(100%);  
   }  
   to {  
     opacity: 1;  
     -webkit-transform: translateY(0);      
     transform: translateY(0);      
   }  
 }  
 @-moz-keyframes testim-content-in {  
   from {  
     opacity: 0;  
     -moz-transform: translateY(100%);  
     transform: translateY(100%);  
   }  
   to {  
     opacity: 1;  
     -moz-transform: translateY(0);      
     transform: translateY(0);      
   }  
 }  
 @-ms-keyframes testim-content-in {  
   from {  
     opacity: 0;  
     -ms-transform: translateY(100%);  
     transform: translateY(100%);  
   }  
   to {  
     opacity: 1;  
     -ms-transform: translateY(0);      
     transform: translateY(0);      
   }  
 }  
 @-o-keyframes testim-content-in {  
   from {  
     opacity: 0;  
     -o-transform: translateY(100%);  
     transform: translateY(100%);  
   }  
   to {  
     opacity: 1;  
     -o-transform: translateY(0);      
     transform: translateY(0);      
   }  
 }  
 @keyframes testim-content-in {  
   from {  
     opacity: 0;  
     transform: translateY(100%);  
   }  
   to {  
     opacity: 1;  
     transform: translateY(0);      
   }  
 }  
 @-webkit-keyframes testim-content-out {  
   from {  
     opacity: 1;  
     -webkit-transform: translateY(0);  
     transform: translateY(0);  
   }  
   to {  
     opacity: 0;  
     -webkit-transform: translateY(-100%);      
     transform: translateY(-100%);      
   }  
 }  
 @-moz-keyframes testim-content-out {  
   from {  
     opacity: 1;  
     -moz-transform: translateY(0);  
     transform: translateY(0);  
   }  
   to {  
     opacity: 0;  
     -moz-transform: translateY(-100%);      
     transform: translateY(-100%);      
   }  
 }  
 @-ms-keyframes testim-content-out {  
   from {  
     opacity: 1;  
     -ms-transform: translateY(0);  
     transform: translateY(0);  
   }  
   to {  
     opacity: 0;  
     -ms-transform: translateY(-100%);      
     transform: translateY(-100%);      
   }  
 }  
 @-o-keyframes testim-content-out {  
   from {  
     opacity: 1;  
     -o-transform: translateY(0);  
     transform: translateY(0);  
   }  
   to {  
     opacity: 0;  
     transform: translateY(-100%);      
     transform: translateY(-100%);      
   }  
 }  
 @keyframes testim-content-out {  
   from {  
     opacity: 1;  
     transform: translateY(0);  
   }  
   to {  
     opacity: 0;  
     transform: translateY(-100%);      
   }  
 }  
 @-webkit-keyframes testim-show {  
   from {  
     opacity: 0;  
     -webkit-transform: scale(0);  
     transform: scale(0);  
   }  
   to {  
     opacity: 1;  
     -webkit-transform: scale(1);      
     transform: scale(1);      
   }  
 }  
 @-moz-keyframes testim-show {  
   from {  
     opacity: 0;  
     -moz-transform: scale(0);  
     transform: scale(0);  
   }  
   to {  
     opacity: 1;  
     -moz-transform: scale(1);      
     transform: scale(1);      
   }  
 }  
 @-ms-keyframes testim-show {  
   from {  
     opacity: 0;  
     -ms-transform: scale(0);  
     transform: scale(0);  
   }  
   to {  
     opacity: 1;  
     -ms-transform: scale(1);      
     transform: scale(1);      
   }  
 }  
 @-o-keyframes testim-show {  
   from {  
     opacity: 0;  
     -o-transform: scale(0);  
     transform: scale(0);  
   }  
   to {  
     opacity: 1;  
     -o-transform: scale(1);      
     transform: scale(1);      
   }  
 }  
 @keyframes testim-show {  
   from {  
     opacity: 0;  
     transform: scale(0);  
   }  
   to {  
     opacity: 1;  
     transform: scale(1);      
   }  
 }  
 @-webkit-keyframes testim-hide {  
   from {  
     opacity: 1;  
     -webkit-transform: scale(1);      
     transform: scale(1);      
   }  
   to {  
     opacity: 0;  
     -webkit-transform: scale(0);  
     transform: scale(0);  
   }  
 }  
 @-moz-keyframes testim-hide {  
   from {  
     opacity: 1;  
     -moz-transform: scale(1);      
     transform: scale(1);      
   }  
   to {  
     opacity: 0;  
     -moz-transform: scale(0);  
     transform: scale(0);  
   }  
 }  
 @-ms-keyframes testim-hide {  
   from {  
     opacity: 1;  
     -ms-transform: scale(1);      
     transform: scale(1);      
   }  
   to {  
     opacity: 0;  
     -ms-transform: scale(0);  
     transform: scale(0);  
   }  
 }  
 @-o-keyframes testim-hide {  
   from {  
     opacity: 1;  
     -o-transform: scale(1);      
     transform: scale(1);      
   }  
   to {  
     opacity: 0;  
     -o-transform: scale(0);  
     transform: scale(0);  
   }  
 }  
 @keyframes testim-hide {  
   from {  
     opacity: 1;  
     transform: scale(1);      
   }  
   to {  
     opacity: 0;  
     transform: scale(0);  
   }  
 }  
 @media all and (max-width: 300px) {  
      body {  
           font-size: 14px;  
      }  
 }  
 @media all and (max-width: 500px) {  
      .testim .arrow {  
           font-size: 1.5em;  
      }  
      .testim .cont div p {  
           line-height: 25px;  
      }  
 }

Now we have completed our CSS section,  Here is our updated output CSS.

output

Testimonial Slider using css | Testimonial Slider code - codewithrandom


Now add javascript for functionality.

Javascript code 

 // vars  
 'use strict'  
 var     testim = document.getElementById("testim"),  
           testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),  
   testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),  
   testimLeftArrow = document.getElementById("left-arrow"),  
   testimRightArrow = document.getElementById("right-arrow"),  
   testimSpeed = 4500,  
   currentSlide = 0,  
   currentActive = 0,  
   testimTimer,  
           touchStartPos,  
           touchEndPos,  
           touchPosDiff,  
           ignoreTouch = 30;  
 ;  
 window.onload = function() {  
   // Testim Script  
   function playSlide(slide) {  
     for (var k = 0; k < testimDots.length; k++) {  
       testimContent[k].classList.remove("active");  
       testimContent[k].classList.remove("inactive");  
       testimDots[k].classList.remove("active");  
     }  
     if (slide < 0) {  
       slide = currentSlide = testimContent.length-1;  
     }  
     if (slide > testimContent.length - 1) {  
       slide = currentSlide = 0;  
     }  
     if (currentActive != currentSlide) {  
       testimContent[currentActive].classList.add("inactive");        
     }  
     testimContent[slide].classList.add("active");  
     testimDots[slide].classList.add("active");  
     currentActive = currentSlide;  
     clearTimeout(testimTimer);  
     testimTimer = setTimeout(function() {  
       playSlide(currentSlide += 1);  
     }, testimSpeed)  
   }  
   testimLeftArrow.addEventListener("click", function() {  
     playSlide(currentSlide -= 1);  
   })  
   testimRightArrow.addEventListener("click", function() {  
     playSlide(currentSlide += 1);  
   })    
   for (var l = 0; l < testimDots.length; l++) {  
     testimDots[l].addEventListener("click", function() {  
       playSlide(currentSlide = testimDots.indexOf(this));  
     })  
   }  
   playSlide(currentSlide);  
   // keyboard shortcuts  
   document.addEventListener("keyup", function(e) {  
     switch (e.keyCode) {  
       case 37:  
         testimLeftArrow.click();  
         break;  
       case 39:  
         testimRightArrow.click();  
         break;  
       case 39:  
         testimRightArrow.click();  
         break;  
       default:  
         break;  
     }  
   })  
           testim.addEventListener("touchstart", function(e) {  
                     touchStartPos = e.changedTouches[0].clientX;  
           })  
           testim.addEventListener("touchend", function(e) {  
                     touchEndPos = e.changedTouches[0].clientX;  
                     touchPosDiff = touchStartPos - touchEndPos;  
                     console.log(touchPosDiff);  
                     console.log(touchStartPos);       
                     console.log(touchEndPos);       
                     if (touchPosDiff > 0 + ignoreTouch) {  
                               testimLeftArrow.click();  
                     } else if (touchPosDiff < 0 - ignoreTouch) {  
                               testimRightArrow.click();  
                     } else {  
                          return;  
                     }  
           })  
 }

Final output

Testimonial Slider using css | Testimonial Slider code - codewithrandom

Now we have completed our javascript section,  Here is our updated output with javascript. Hope you like the Testimonial Slider you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕.
credit codepen user: @feyinway

In this post, we learn how to create an Testimonial Slider  using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

Leave a Comment