How to Do an Easy Testimonials Slider with Classic Slider

Hey guys,
I couldn’t find a good solution for a text-only slider with customer testimonials in this forum, but there is a simple answer in the old forum.
Obviously, both the navigation dots and the prev/next arrows in the top left corner are dated.

Here’s how to make the next arrow be on the right. Add in page CSS:

.flex-direction-nav a.flex-next {
    left: initial;
    right: 14px;
} 

Then if you want to have them centered vertically and have just the < prev and next > symbols, use this in addition:

.flex-direction-nav a.flex-prev {
left: 2px;
}

.flex-direction-nav a {
  top: 45%;
  height: 50px;
  width: auto;
  font-size: 30px;
  text-align: center;
  color: #fff;
  background-color: rgba(255,255,255,0);
  border-radius: 100em;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  }

Of course there’s a lot there you can play around with… changing the padding inside the slides to add space between text and arrows, etc.
Also, depending on your base font, you may need to change your “font-family” for this.

-Abby Buzon
The Helpful Marketer

4 Likes

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.