Testimonial Slider

Hello,

My site is currently hosted on WordPress and uses a testimonial slider plugin which I quite like. It scrolls automatically between testimonials based on a time lag I decide on. See below.

What’s the best approach to replicate this on Bubble? I tried the Slickslideshow plugin but it doesn’t seem appropritate.

Any advice would be much appreciated :smiley:

1 Like

Hey Alex,

You could set this up without a plugin. I would have a custom data type called “Testimonial” (or, if you only plan on showing a very small list of testimonials, you could just toggle between different groups that hold static content). For the time lag, there’s a workflow trigger you can set up called “Do every 5 seconds” Screen Shot 2020-05-27 at 9.17.35 AM

You can change the time interval to whatever you want, and you can set up an action inside of this workflow that cycles through the testimonials (there are a number of ways to do this depending on your setup for testimonials).

Hope this helps!

  • Jacob

Need A Bubble Developer?

2 Likes

Thanks so much @jacobgershkovich! That’s really helpful :smiley:

Sorry if this is going down a rabbit hole, but what do you mean about setting up an action inside of the workflow that cycles through the testimonials? I don’t really understand :neutral_face:

Even if you can point me to the right part of the Bubble manual to read it would be fantastic!

Thanks again,
Alex

Hey @alexcooney5,
When you go to your workflow screen, when you create a new one, you can pick (under General) “Do Every 5 Seconds”. This creates an event. You can configure it to be any amount of seconds you want. Once created, under that event, you can make changes happen to the site.

I’m fairly new to Bubble… and I’m working through the same problem right now. I have a Thing called Testimonial with an image, author, and review. I have a group that has type Testimonial and I have image and formatted text boxes that get their info from the parent group’s testimony.

The part I’m working through now is how to cycle through the list of Testimonials, highlight the appropriate circle/icon, and change the Testimony with a < or > icon button. I think I may have to use a temporary state.

Of course, here’s hoping others in the forum might be able to offer some direction.
Andrew

2 Likes

Cheers @incube.co! To be honest, I never quite came up with a satisfactory solution.

Ended up using a horizontal slider (you can see at the bottom of this page).

It’s a bit tedious, but create a custom state for each element (icon, breadcrumb, caption) that acts as a counter. When you hit the next or previous arrow, increase or decrease the value of the counter by 1. Set a condition for element to show up depending on the value of the counter. Putting a modulus in the condition helps take care of the negative states of the counter.

Maybe it’s too late for @alexcooney5, but this may be helpful for someone struggling with the same issue.

I just built a solution for this and it doesn’t involve custom states – could be a nice one for anyone trying to replicate that layout.

I have a repeating group bringing up banners that are in my DB – not fancy there.

image
One row, on column, just one banner showing at a time.

image
With the Do every 5 seconds action, I set the auto slide, with a bit of animation out and back in (TransitionFadeOut in the first action, duration of 800ms and TransitionFadeIn on the last one, duration of 500ms – so I don’t get a blank state between the transitions).

image

For the navigation, I’ve used the Toolbox plugin to create a list of numbers.
Just grab the ListOfNumbers element into the page and put the Length of it to be your banner repeating group count.

image
Then create a Repeating Group with that list of numbers being your Data Source, and create the dots as you wish.

image
I’ve set up a conditional to change it’s color when the page number in the Banner Repeating Group matches the dot index, so it reflects which banner is active.

And for making it navigate through a click, just add a workflow action to the dot, using the Go to page of a repeating group and seting it to the current cell number
image

Hope it helps someone!