Streaming live at 10am (PST)

Help creating custom responsive testimonial slider


#1

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: http://lsav2.webflow.io/courses/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:


#2

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:


#3

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


#4

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: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

Using custom code in an embed component on the page: https://university.webflow.com/article/embed

My Best,
Micah


#5

Hi @heywoodej,

It took a bit of searching, but I just found the following custom slider that includes adaptive height: http://kenwheeler.github.io/slick/

Hopefully this helps :nerd_face:


#6

Thanks @micahryanhtml :slight_smile:


#7

@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!


#8

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 https://github.com/kenwheeler/slick/

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 - https://preview.webflow.com/preview/slick-carousel?preview=be8511dd3387c7c7addaf059f1503c95
Short video - https://cl.ly/1a171O3U0A02

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

I’m happy to help further!


#9

@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!


#10

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:


#11

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


#12

Oh, my pleasure! :webflow_heart: