Adjusting Finsweet CSM Slider Slide Heights

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?

sure

https://preview.webflow.com/preview/truckspace-trailerrepair-0f48c376b54112?utm_medium[…]2&preview=ee3834e10fd5dfc7c41970e323ea06e3&workflow=preview

there are 2 sliders in there at present. 2nd one is the swiper one

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.

the master!

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