Community forum for knowledge and support

Updated 11 months ago

Adjusting Finsweet CSM Slider Slide Heights

At a glance

The community member is having trouble getting the Finsweet CSM slider slides to be the same height regardless of content length. They have tried adding jQuery but haven't found a solution. The comments suggest using a slider library like Splide or Swiper, which can dynamically adjust the slide heights. The community member tried using Swiper but encountered an issue with the pagination buttons moving down when a slide with more content came into view. They shared their Swiper code and a read-only link to their Webflow project, and the community members provided suggestions to address the issue, such as adjusting the flexbox settings. The recommended solution seems to be using Swiper, as it is a top-notch slider library that can handle this use case.

Useful resources

Hi! Is it possible to get the finsweet csm slider slides to all be the same height regardless of content length? I have added jQuery (maybe its wrong) and have been at this for hours with no solution. please help

P
J
M
21 comments

Probably need to set a min height for the titles. So that the 1 line titles box will be as tall as the 1st title with 3 lines

Sure but what about the content? isn't there a way to make it responsive to the tallest slide? Like how you can do that with webflow native grid.

Hmm this I do not know..My knowledge only goes so far. I think the grid wont dynamically change size. Its always based on a 'fr' right?
Goodluck!

Hey yeah if you set grid to auto and card inside to 100% height it will take the height of the tallest card. Yet it doesnt work on this cms slider. The code is preventing it

Ah I see. Can't help you with this sorry

you'll need/want to use a slider library like splidejs (easier to implement) or swiperjs (more features) to achieve this.

If on a scale of 1-10, 1 being you just heard about Webflow yesterday and 10 you are a Webflow expert, and you are somewhere around the 4-6 mark, you should be good to go. If you are below a 4...let me know or try to get as far as you can and let me know where you get stuck and I can help you get unblocked - no problem. I'm here! πŸ’ͺ

Hey thanks for the reply. I have given swiperjs a go. I was doing a tutorial by timothy ricks and got close. The pagnation buttons move down each time a card with more content came into view though. This is the code I am using:

<script>https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js</a>"></script>
<script><br />$(".slider-main_component").each(function (index) {<br /> let loopMode = false;<br /> if ($(this).attr("loop-mode") === "true") {<br /> loopMode = true;<br /> }<br /> let sliderDuration = 500;<br /> if ($(this).attr("slider-duration") !== undefined) {<br /> sliderDuration = +$(this).attr("slider-duration");<br /> }<br /> const swiper = new Swiper($(this).find(".swiper")[0], {<br /> speed: sliderDuration,<br /> loop: true,<br /> autoHeight: true,<br /> centeredSlides: false,<br /> followFinger: true,<br /> freeMode: false,<br /> slideToClickedSlide: false,<br /> slidesPerView: 1,<br /> spaceBetween: "4%",<br /> rewind: false,<br /> mousewheel: {<br /> forceToAxis: true<br /> },<br /> keyboard: {<br /> enabled: true,<br /> onlyInViewport: true<br /> },<br /> breakpoints: {<br /> // mobile landscape<br /> 480: {<br /> slidesPerView: 1,<br /> spaceBetween: "4%"<br /> },<br /> // tablet<br /> 768: {<br /> slidesPerView: 2,<br /> spaceBetween: "4%"<br /> },<br /> // desktop<br /> 992: {<br /> slidesPerView: 4,<br /> spaceBetween: "2%"<br /> }<br /> },<br /> pagination: {<br /> el: $(this).find(".swiper-bullet-wrapper")[0],<br /> bulletActiveClass: "is-active",<br /> bulletClass: "swiper-bullet",<br /> clickable: true<br /> },<br /> navigation: {<br /> nextEl: $(this).find(".swiper-next")[0],<br /> prevEl: $(this).find(".swiper-prev")[0],<br /> disabledClass: "is-disabled"<br /> },<br /> slideActiveClass: "is-active",<br /> slideDuplicateActiveClass: "is-active"<br /> });<br />});<br /></script>

If you have any other tips or maybe a different tutorial I could try to implement either splide or swiper I am all for it. I am quite well versed in webflow, I just dont understand js. But trying to learn basics

Would you mind sending a read-only link?

1st is the finsweet one.

oh also I'll need the published URL in order to see the full slider functionality! Will definitely take a look - we got this! πŸ’ͺ

I just made 2 of the titles longer for testing. otherwise everything was same length. Thanks for your assistance
https://truckspace-trailerrepair-0f48c376b54112.webflow.io/

and we want all of the cards to be the same height regardless of content or no?

yes that is correct

okay no problem - I think we just need to change this flexbox setting to stretch like I have in this screenshot, and those buttons should stop moving up and down.

thank you again. Seems like quite a lot of code. Would this be your recommended solution? or is splide or swiper have more simplified solutions?

yeah seems like par for the course honestly

you are in good hands with swiper, its top notch for sure.

Love the site btw - looks so good!

alright Ill take a deep dive into swiper then. Thanks for you help again. really appreciate it

Add a reply
Sign up and join the conversation on Slack