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
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
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
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
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/
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?
alright Ill take a deep dive into swiper then. Thanks for you help again. really appreciate it