Minimalist websites and sliders aren’t going to to go out of date. Why not spice up your website with a minimalist testimonial slider? On the slider above, you’ll find a nicely placed slider background image. It’s easy to recognize slider background images. These images stay static while the slides move in front of them. To increase the legibility of the slides, we’ve darkened the background image. This high contrast allows the white texts to be read on each slide.
You can switch slides three ways: by arrows, bullets or dragging/swiping. This makes the slider mobile friendly. On mobile devices it’s more natural and convenient to swipe than to tap small elements. After the slides have switched, the layers reveal themselves by fading in from the right. This gives a small motion to the slides which makes them more interesting for visitors. Speaking about interesting effects, did you notice the arrows change color on hover? By default, they have an opaque white color. When you hover on the arrow, its color changes to a whiter color.
Let’s talk about the content of the slide now. We’ve built each slide using Content mode, which makes them behave better on small screens. The slides have an image layer, which displays the customer’s picture. The images were rounded beforehand. Below each image there’s a text layer. It contains the testimonial text, the customer’s opinion on the product. The text color is white and the size is big, as this is the most important part of the testimonial slider.
At the bottom of the slide there are two heading layers: the top has the customer name. The bottom one, with lighter font color, reads their occupation. This isn’t crucial info, but it might be a great addition. For instance, if you sell products for athletes, you want to show which professionals are using it. This encourages the visitor to buy.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Related Post: Best Testimonial Slider Examples for WordPress
Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro