Any website which offers service should have a section for testimonials, right? If you are working on such kind of site and looking for soliton to add client feedback than it’s a good idea to add them as a slider.
You have seen many slideshows for testimonials which build with Javascript or Jquery but how about create one with pure CSS and also make it responsive?
In this tutorial, You will find out a custom testimonials slider which is just like any kind of Javascript slider and it’s perfect for your landing page.
This client feedback slider is easy to implement and very lightweight using pure CSS for the sliding animations. It comes with dot navigations for easy to switch each slide.
The testimonials carousal also allow you to add images, icons, and another HTML element. Every element on the slider looks modern and simplistic. No too many colors, texture or extra design elements.
It’s perfect for you to implement on your website and make it look good without overloading site scripts.
How to Create Pure CSS Testimonial Slider
By adding the testimonial.css file into your webpage you can easily get started with implementation.
<link rel="stylesheet" type="text/css" href="testimonial.css" />
The markup is very important whenever you use any plugin. To be very honest you will surely love this testimonial slideshow because it truly comes with minimal markup.
Don’t you believe me? Let’s start with a div with class slider.
<div class="slider">
All HTML Goes Here
</div>Next, we will create the dot navigation and for this, we will simply use the radio input type buttons. The first radio always checked for active testimonial slide.
<div class="slider">
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav"/>
<input type="radio" name="slider" title="slide2" class="slider__nav"/>
<input type="radio" name="slider" title="slide3" class="slider__nav"/>
<input type="radio" name="slider" title="slide4" class="slider__nav"/>
</div>Our dot navigation did and now we will create a content slide for testimonials. For this, we will define a div with a class name slider__inner.
<div class="slider">
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav"/>
<input type="radio" name="slider" title="slide2" class="slider__nav"/>
<input type="radio" name="slider" title="slide3" class="slider__nav"/>
<input type="radio" name="slider" title="slide4" class="slider__nav"/>
<div class="slider__inner">
All HTML for Testimonial Content Goes Here...
</div>
</div>Finally, we will place content and for this, we will create another div with class name slider__contents and add our content. It supports any kind of HTML tag and you can define icons, image, and heading.
Let’s have a look at the complete source code:
<div class="slider">
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav"/>
<input type="radio" name="slider" title="slide2" class="slider__nav"/>
<input type="radio" name="slider" title="slide3" class="slider__nav"/>
<input type="radio" name="slider" title="slide4" class="slider__nav"/>
<div class="slider__inner">
<div class="slider__contents"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>That’s it. If you want to customize it, You can easily do it by editing the CSS file. Currently, It supports a maximum of 4 slides but if you want to add more then you need to customize the testimonial.css
For any Javascript or jquery sliders, We can easily add more or less slides by changing the values but for pure CSS sliders, you can’t do like that.
You need to play with CSS code little bit.