You are my new favorite youtuber, your instructions were so clear and to the point. I don't even know javascript but i think I can pull this off with your tutorial and especially with your cloneable. time to watch more of your vids, keep em coming!

OMG I love this! I’ve been tearing my hair out trying to do sliders with the Webflow native slider, CMS, and Finsweet Attributes and it’s just not good. Fair bit of custom code here but much better control.

I don't understand why this isn't a default for the WF Sliders. You can't even display a collection in there. As always, thank you so much tim. Without you I wouldn't have picked up Webflow!

Tim Ricks you are the best! - You also got me into Webflow and I am very inspired by you. Love your work you are amazing - Will look to join your Patreon soon :)

Your explanation make things super easy💥

Thank you a lot for this. This is purely gold.

Very awesome tutorial! Thank you! 🙌

Tim... I must say.... your content is astounding. I am so grateful for your heart to make this stuff free. You should try to find out how to enable Super Thanks on your videos so people can donate as patronage. Keep up the great work!

@timothyricks

Жыл бұрын

Thanks so much, Sean!!

Extremely helpful! Thank you

This is awesome! I was wondering how you can make the text a hyperlink here for each individual title?

Super useful! Thank you for this tutorial!

@timothyricks

Жыл бұрын

So glad it helps!

amazing tutorial!

Thank you Tim!

Wow, this was super helpful!

Hey Timothy, thanks for another great tutorial. How would you fix this lighthouse diagnostics "Does not use passive listeners to improve scrolling performance"? Is this possible?

So great. Thank you again!

Just when I thought I had a handle on Webflow this blows the lid off that! Great content. I have a lot to learn! sigh!

Thank you again web bro!

Thank you for this comprehensive tutorial. I learned a lot. Can anyone help me figure out why the color change that I added as a class to the "is-active" pagination dot (that lives on a darker background), is not being acknowledged on the live site? The class change is acknowledged in my build on webflow, and oddly enough, when the live site first loads, the color appears for a split second, but then defaults back to the core color that I'm using on other lighter backgrounds throughout the site.

Thank you very much, this was exactly what i was looking for, howver icopied the clonable div block from the project into mine, i can't find the custom code and it is not responsive, please kindly help. it would be helpful if the custom codes are easily avaliable so we can make changes to the classes and deploy

I have a question. I’ve been wanting to make this slider with a hover animation, however, the duplicate slides do not take the hover animation of the true slides. Is there a way where I can transfer that hover animation to the duplicate/looped slides?

The best. Thx man :)

This is just what I was looking for! Do you know how you could have each of the images take on its own width (rather than each image being the same size)?

@youkba

Жыл бұрын

Width = auto

Hi Tim great tutorial as always!. I am trying to get all slides the same height regardless of content. At present I have varying amounts of content and some slides are taller than others. What would I add to the jQuery code to make them all the same height at all times? Thank you kindly

Hi Tim, as always great video, what library would you suggest splide or swiper? I recall you mentioned that splide has good documentation!

@timothyricks

Жыл бұрын

Thanks Sachin! Both are solid options. I've switched to Swiper for all of my new projects because it has more features.

Hi Timothy! Thanks for your videos! Can I use this to build a slider without CMS?

Too good! How would we get autoScroll on this, so they're slowly moving?

Can you make a video on how to have automate slider. A horizontal slider, with mockups auto sliding

Nice can we have a progress bar that grow when we scroll

Thank you SO SO much🙏🙏

Just wondering.. after having implemented the scroll, my mobile version of the website has a horizontal scroll. I've tried trouble shooting and fixing the problem but never got to the bottom of it. Any suggestions and directions would be appreciated, Thanks

I am trying to change the on-hover background color of the buttons but can't figure out where to change this. Can anyone point me in the right direction?

Thanks!

Only seeing the clonable for the (Advanced swiper Slider) video and not this version (Ultimate CMS Slider)? How do i get the this clonable?

@timothyricks Love your videos man! I followed your guide, had it all working and suddenly the pagination and drag bar stopped working, would you be able help me debug. The slider it self works it just wont populate the dots

Thank you so much! I have a question, how did you get that JS embed link at 4:14? I'm so sick of having to save and publish the site to test slider changes every time, I tried codesandbox but I can't find a direct JS embed like yours.

@jgustafe

9 ай бұрын

Any luck on figuring this out? Apparently this is a question that has been asked a few time times, but never answered. I'm still looking for an answer. Hope you found one.

@dianaatobe7995

8 ай бұрын

samee, did you figure it out?

@SnowBroder_Andrew

8 ай бұрын

@@dianaatobe7995 Have same problem. Still can't work with codesandbox but there is another option. Just go by webflow clone link in description below video ( Timothy have left it there ) then push "open in webflow" button, go to the page settings of Slider Main and just copy the code and then paste it in your project. It worked out for me. All you need is build your slider with the same class names

Gold.😊

we can keep slidesPerView: 'auto' and have slide gap, using slide paddings with calc(var(--gap)/2). And adding negative margins to .swiper-wrapper via calc(var(--gap)/-2).

Hi Timothy, desperately trying to this with a main slider that has embedded sliders in each slide. Whatever I do I cant get the pagination to work. Is it it possible, do you know? looked for tutorials everywhere but no luck....Help!

The cloneable link is for the slider shown in the last few seconds of the video. Is there not a cloneable project (or view in Webflow) for the one in this video?

@timothyricks

Жыл бұрын

It’s the same link for both. This slider is on the second page. There’s a couple sliders in that project.

Just wanted to support you with a comment 👍 Thanks a lot!

Thank you for the tutorial! This this work with CMS items only?

@timothyricks

Жыл бұрын

Glad this helps! This works without a CMS also. You'd just need to recreate the collection wrapper, list, and items with static divs instead.

@daniel.s710

Жыл бұрын

@@timothyricks ok, thank you!

Hello! I built this without CMS for a gallery images but how can I implement an image zoom on click? Thank you very much!

anyone else having difficulties with the slider buttons? am I supposed to do anything in the settings besides the custom code to get the buttons to activate the slider? whenever i click the buttons nothing happens, but i see that i have slides in my cms

Currently working on a project using swiper.js! However I only want the slider to be active on landscape and above. I have written all the code for the slider to only activate when screen size is 480px or higher. But when a user resizes the window to smaller (say they tilt their phone from landscape to vertical) I want to run swiper.destroy();. but for some reason it comes back as swiper.destroy is not a function. I have made sure this code only runs if swiper is not "undefined". But still to no avail. Do you know how I could get the destroy function to work?

I add loop : true but when i click a photo it slide right to left to middle but the next photo was not showing when I add autoplay the next photo is appeared in middle an so on

Hi Tim! I would like to ask you - I have an element inside of the slider that I gave a fixed position (so it's relative to the body), but on a published site, it is somehow positioned/wrapped inside of the slider. (in webflow designer all works great - i.e. relative to body, fixed position in the viewport). By any chance - do you have a suggestion how to fix it? Thank you!!!

@james8356

7 ай бұрын

Hi mate, did you manage to figure this out? I've tried many sliders now and they all give me the same issue. Cheers

@MartinBosy

7 ай бұрын

@@james8356 Unfortunately I didn't.

Hey Timothy! Any chance you can upload the original (this version) as a cloneable instead of just part 2?! 🙏

@timothyricks

Жыл бұрын

It’s on the second page in the cloneable. There’s a couple sliders in that project to choose from

@neilmagadzia

Жыл бұрын

@@timothyricks how did I miss that 😆 thanks so much for everything you do! ❤️

Hey im changing the breakpoints from 3 to 1 and suddenly the whole page is blanl except 1 blurry image across the whole page

Any reason why copy and paste-ing from your clone-able site to my custom one wouldn't work?

@davidkathrein9644

Жыл бұрын

Copying cms items doesn’t work well

Hey Timothy, I noticed that codesandbox has changed its subscription options and now you can't really access any thing on the sandbox publicly. Do you know if there's any other similar tool where we can edit and deploy code in a similar way as it did? Setting up VSCode environments and local hosting is a bit complicated for me to get that going.

@timothyricks

4 ай бұрын

Hi Noel, Slater.app is a good replacement and made specifically for Webflow

@NoelBraganza

4 ай бұрын

@@timothyricks As always, thank you so much for all your help on KZread.

hey Tim! thanks for this, any idea why on mobile the pagination dots do not retain the same styling and almost look stretched?

@timothyricks

Жыл бұрын

Sure thing! They’re button elements so they may have some default padding or styling on mobile either from being buttons or from swiper itself. Those styles can usually be found in the inspector.

@nicholasryanhoward667

Жыл бұрын

Yeah strangely the dots are squished only on iOS Safari, as far as I can tell (fine in Chrome dev tools, find on Android)

@magic_miles

Жыл бұрын

@@nicholasryanhoward667 @Legacy Design Agency - this happened to me too. Did anyone figure it out?

@brewyth

Жыл бұрын

Has anybody found a solution for this?

@magic_miles

Жыл бұрын

@@brewyth I did not and couldn't find it documented anywhere else, so I ended up going with a different slider solution for now.

For some reason, my slides are super huge for no reason. I followed your tutorial several times already but this time a slide not 33.33% like set it to, instead it is 5.5924e+06px. Do you have an idea how that happens?

@mackster0601

7 ай бұрын

hey man, I guess this is my first ever YT comment and I'm not sure if you read it. But I had the same problem, but as soon as I switched the slidesPerView from "auto" to 3 it worked super well. In the video you also see how to overwrite for different breakpoints.

I'm a noob and I've been trying to get this to work for hours. I have the structure set up correctly, but I can't seem to get the js from codesandbox to link correctly. I can tell because I am not getting the scroll behavior, and no matter what I change in the js (for instance space between) it is not reflected in the webflow design. Can anyone help?

@dianaatobe7995

8 ай бұрын

did you figure it out? I'm having the same problem

Hi Timothy, this is a great tutorial, but I'm finding that the pagination dots are never fully circle on mobile. I tried to publish my site many times and even published your cloneable, and the same issue is occurring. Do you know why the pagination dots aren't circular?

@timothyricks

8 ай бұрын

I think it has something to do with the way button elements are rendered on IOS. Try switching where it says “button” in the code to “div” instead.

@aryzedesign

8 ай бұрын

That worked perfectly! Thanks!!@@timothyricks

Finally 😢

Like your tutorial, but cant use it because im on free account that cannot do custom code. Hope webflow will make limited custom code free in the future

I wish there was an easier way to display a slider for multi-images in each collection item.... seems like that is really hard to set up.

@timothyricks

Жыл бұрын

This should work for multi-image items also. The main item would be the component, and the slider classes would go on the multi-image wrapper (swiper), list (swiper-wrapper) and item (swiper-slide)

@seanokana

Жыл бұрын

​@@timothyricks ah yea... i think I got mixed up--I've been trying to add a lightbox (slider) to the bottom of each item if the post has multiple images, but there is never an option to pull multi-image items in the lightbox component.

None of this worked for me, copied the codes from the cloneable and still it’s not swiping

Didn't work for me. Gutted. :( looks really cool! For some reason when page loads the slides and slider expands to nothing! 😪

Are you sold on this over Splide these days?

@timothyricks

Жыл бұрын

Yes, swiper just has a lot more features

@nicholasryanhoward667

Жыл бұрын

@@timothyricks rad! I'm on it! Thanks man!

Te amo hijo de perra, no sabia que existian cms para sliders GRACIAS!