Carousel for testimonials

Does anyone know how to create a carousel for testimonials like the one below?

https://amazingcarousel.com/examples/jquery-testimonial-slider-id14/

The easiest way in Blocs would be to create the one image with the gray background and add the small circle images and text below. Once you have one done just add different images and text and add a second slide. Would work well for desktop and tablet but it would be small on phone size. You would have to use other images for phone.

Casey

Ok, so maybe I missed something, so please help me…but by the time, I’d like to do a simple carousel with testimonials, I mean many ones, not a single one…how can I do this with Blocs please, like the one I could do in an other software.
I’d like to mention one important thing, I don’t want to do it with image, with text like in the following screen capture below. (white background)

UPDATE : even the second capture (made under Blocs) it would be better because of nice the photo frame…but I can’t had a second testimonial.

Thank you very much for your help.

Hey @drumster81 did you find a solution this? Testimonial carousels are such a standard feature of websites, these days that I think it must be super-easy to build one in Blocs, but how? :face_with_raised_eyebrow: Anyone created one and got advice to share with us? Or perhaps there is a cool Blocs developer out there that can create one for us… :wink:

Hi,

Take a look at this website I have built. If this is something you want, you can create that by adding a transparent png files as slides and just type text over it.

Cheers,
Eldar

Thanks @Eldar for your reply. That’s a neat solution. And I guess you can add CMS to that too. I’m going to try it out and see!

@Eldar, your slider looks great! I just tried to build that and for some odd reason, I can’t add/edit any text on the slides. I’ve placed a 600px x 400px transparent image on the slide and am trying to add text with no success. I must be missing something terribly obvious… sigh…

I am away from my computer at the moment, but I think you just need to click on the blue square with name of the bric you have placed in Drop mode (located at the top left corner of the bric). Then you could easily edit the text.

That did it! Dang… I’ve always been able to double-click to highlight the text… (or at least I thought I was able to do it that way??) Weird… Thanks Eldar!

Hi guys,

Sorry to dig up an old post !

I have followed what @Eldar has mentioned above to create my testimonials on a carousel, the only thing I am struggling with is how to add an icon onto this? I can’t seem to edit any icons I add. Normally I add an icon and change it (font awesome) this way I cant seem to do anything.

I have just tried adding an image too, and cant seem to add an image either.

So i am guessing in carousel you can only add text in the middle of it, and nothing else?

Thanks all.

Yes @AdieJAM ! I’m back trying to recreate what @Eldar told me in his post of October 2018. See above :point_up_2:

I’ve looked at the code again, on his Events website, but cannot figure out how to get images in the Caption Area. Everytime I try to add an image bric, Blocs doesn’t let me do it. :disappointed:

I think it would be super-useful if someone could provide us with clear, simply step-by-step instructions on how we achieve this.

I don’t think this is the way @Eldar dealt with it (he seems to have used nested divs inside the caption area), but a simple option would be to make your slide in an image editing application. Create the image on a plain or transparent canvas and add the circular image leaving sufficient space for the caption area. Export the image (PNG if the background is transparent) and add it to your carousel. You can then add text as normal to the caption area. Repeat for the other slides.

My question was how do I achieve this using Blocs?

I already know how to do things with photo editing apps, thanks!

I guess you will have to wait for @Eldar to come along and offer you a “step by step”. Meanwhile, here is the structure of the carousel in his template:

The first item is the carousel itself.
The second item is the indicators
The third item is the inner container
The fourth item is the carousel item
The fifth item is the first carousel image
The sixth item is the caption area.

(all of the above will be placed when you add a carousel)

In the example, it looks like a plain transparent image background image has been used to replace the standard placeholder image.

The seventh item appears to be Div added with a class of event-review assigned to it. This has been nested inside the Caption Area.

The eighth item is another nested div

The ninth item is the actual image that has been assigned a class of image-style

The tenth, eleventh and twelfth items are text items (H3, H5 and p) The paragraph text has been assigned a class of event-review-text.

The final item is an icon which is the quote mark.

So, that’s the basics of how it’s supposed to work. Unfortunately, Ive been unable to recreate the carousel on my system. This may have something to do with the fact that the template was created in an earlier version of blocs. When I opened the template for the first time, it opened just fine and I was able to see everything working with no problem. In the process of opening the file, it was converted to the latest version of Blocs. When I tried opening the template a second time, it crashed the blocs app. I’ve tried recreating the carousel in a blank project but I hit the issue you’ve highlighted. The div containing the image shows up as a blocs container instead of having a description of div. Furthermore, an image cannot be added into that container. This may be something for @Norm or @Eldar to comment on. Certainly, the crashing of the app when reopening the modified template needs to be looked at by someone.

3 Likes

This is most helpful @hendon52. Thanks for the screenshot.

I had established earlier that @Eldar was using a transparent PNG file for the slide background.

Just playing around with settings at this end, and I have been able to establish a Code Widget bric might have been used for the 8th Item, and then CSS classes are controlling and styling the content of that div. I’ll keep playing around with it, and will post back any useful findings I may have.

However, I agree that this is a feature that @Norm should look at including in a future update of Blocs. As I mentioned a long time ago, it’s a standard element that found on most sites. So why not make it super-easy for Bloc users to add into our projects?

1 Like

Hi guys, I will check if the technique I have used to build the carousel in Event template is still working in the latest version of Blocs. I haven’t used any code or additional css.

I will come back with more feedback later.
Cheers,
Eldar

3 Likes

Hi all,

I strongly hope that @Norm in Blocs 4 makes carousel for any bric! this 100% makes sense and brings it the same as every other carousel/slider. I also hope there are more options for transitions, fades etc all within the side bar - nice and simple and add it, set it and BOOM! all done.

1 Like

Hi.
I had forum help to produce what, for me, is perfect.
It’s at the bottom of my home page at

Hi @apswoodwork,

Very nice web site! Like your testimonials. :slight_smile:

Just wanted to let you know there seems to be a bit of a problem with paragraph text in magazine review. Probably an easy fix.

Take care.

pruthe

7 Likes