Help creating custom responsive testimonial slider

Hey guys,

I could really use some help on the testimonial cards I’ve created on Webflow. So, the design works most of the time but, if the text is too short for the testimonial then it leaves a mad amount of white space at the bottom of the testimonial and the image won’t stay full height no matter what I do. It does not look good at all. Here’s the link: Beginner Music Production Course. The testimonials are at the bottom.

Any ideas on how I can get the testimonial card to grow or shrink with the amount of text and make sure that the image stays the full length of the card?

Thanks :slight_smile:

1 Like

Hey @heywoodej,

Great question.

Could you provide your read-only link and I’ll be happy to take a look.

Definitely appreciate it :nerd_face:

Hey @micahryanhtml it’s: https://preview.webflow.com/preview/lsav2?preview=c334a47df0b99482b3296d4a128b8d2f Thank you :slight_smile:

1 Like

Hi @heywoodej ,

Definitely a great question.

At the moment the slider component does not automatically calculate for varying height elements placed on individual slides. As you’ve done: setting the height of the slider to auto, then the slider itself will be as tall as the tallest slide in the slider.

I will be happy to check on some custom solution, if I find one that works I will post on your topic.

You are also not limited to Webflow slider alone, you can use third party slider scripts.

Here are some good resources:

Using custom code in the head and body: Custom code in head and body tags | Webflow University

Using custom code in an embed component on the page: Custom code | Webflow University

My Best,
Micah

Hi @heywoodej,

It took a bit of searching, but I just found the following custom slider that includes adaptive height: slick - the last carousel you'll ever need

Hopefully this helps :nerd_face:

1 Like

Thanks @micahryanhtml :slight_smile:

1 Like

@micahryanhtml - oooh this looks nice! I’m a newbie here, so forgive me if this is a less-than-stellar question, but should the code be inserted via embed, or via the head and body? Or both?? I’m just not that great with understanding where code needs to go. Also, once the code is placed where it needs to go, is that dynamically viewable in Webflow and can components be inserted into the Slick slider like they can in a webflow slider? Thank you!

1 Like

Hi @KPMT!

Thank you so much for reaching out about setting up the slick slider. I’m happy to help!

I would suggest inserting the custom code in the head and body:

Once the code is added, and the class names are set - you can view the results once the site is published.

Absolutely, you can insert components into the slick slider and adjust your settings to your liking. And there are a lot of settings.

You can learn all about the flexibility of it at GitHub - kenwheeler/slick: the last carousel you'll ever need

Also, I created a quick project so that you can see one of the ways it can be implemented:
Live site - http://slick-carousel.webflow.io/
Read-only link - Webflow - Slick Carousel
Short video - Screen Recording 2018-03-30...

Feel free to let me know if this is helpful, or if you have any additional questions.

I’m happy to help further!

@micahryanhtml Thank you so much for your great response! I didn’t realize that with a free plan we don’t have access to custom code options, so, alas, I can’t try this out at the moment. Once I’m ready to start paying, however, I’ll be super eager to test this out! Thank you again! :slight_smile:

A few questions:

  • so the code inserted into the head and body is done via the site dashboard?

  • With regard to setting class names, do I just pick names for the classes and then manually add them in? Sorry - really new to CSS!

  • in looking at your sample project (which was helpful to get an idea how how it looks within the designer), it appears that it would take up a ton of space on whichever page I’m placing it on in the designer view…i.e. before it’s rendered to look nice via the Slick CSS code. Is that “look” just something that I need to get used to with this particular custom code when implementing it into a designed page? (Hopefully that made sense!)

Thank you again for your quick response - I really appreciate it!

1 Like

Great questions, @KPMT! I’m happy to help!

  • Yes, the custom code is added to the entire website of the head and body via the site dashboard.
  • Yes, you can name the classes to your liking, but they would need to correspond to the custom code that was added:
  • Yes, when adding custom code - the code is only initiated on the published site. This would be the case for any custom code.

Great questions, definitely!

Glad I could help! :nerd_face:

1 Like

@micahryanhtml thank you thank you! I really appreciate your help!

1 Like

Oh, my pleasure! :webflow_heart:

1 Like

If you’re looking for a code-less solution, then https://embedsmiles.com has a testimonial slider widget that erin helped us setup.

Micah! Thank you! This helped me today as well; I have a testimonial slider, nine slides of ten are all a similar height but one is 3 times the length and really breaks things. By using this method this is fixed AND I can have a collection manage the slider as well, so it’s even better!

Hopefully Webflow will integrate a slider with a height responsiveness on the slider itself some time soon.

Cheers
Grant