big shout-out for pointing out that Finsweet custom code cookie I never noticed before. Huge time saver.

This is Super Helpful man. First Teaching The Basics and Then The Badass Thing.

Fantastic tutorial, love how easy you make it all look :D Thank you, Ilja 🔥

Nice and simple! 🔥🔥🔥

Fantastic explanation again!

Super well done, I plan on implementing this soon!

Nice job mate!

awesome video!

Thank you! This was just what I was looking for! :)

AMAZING!! Thank you so much for explaining the responsive code too. Instant sub!!

Thanks for this ✨✨

Damn... now it really feels like it'll a piece of cake haha 👌💪

Like it bro! Thanks!

Good combo class tip 🤔

Amazing dawg

Thank you so much

Great explanation! I come from a design background. And with your tutorials this sandbox-swiper-GSAP-thing is less intimidating. 💪

@iljavaneck

7 ай бұрын

Ahh that's great to hear, appreciate your comment!

This was awesome! Do you have any tutorials on how to add a scroll bar and connect the buttons to the code? Didn't see them in your channel :(

i'd love to see a video showing how you're able to use code sandbox. i watched and followed along to your codesand box video, but you don't seem to cover how to get your webflow site to show up. You mention you're using the FinSweet plug-in to add the code to the site settings - does that mean without the Finsweet plug-in you wouldn't add the code to the page, but rather site settings? I've tried both to no avail, but I'm trying to understand what I'm doing wrong. Thanks

@daneqvl

Ай бұрын

I ran into the same issue. I got it working after i replaced all the single quotation marks (') with double quotation marks (") in the "Initialize Swiper" code provided by the Swiper website.

I love this sss

Jumped to Codesandbox which for those who have never used before becomes too difficult to follow along. Looked good up until that point.

i just want to add a link block insider the slide to wrap everything, - however, doing so breaks the design. it's so frustrating when you want a div to do NOTHING, yet can'tseem to make that happen. Also, if you didn't style the slides, such as making them 20rem and addingthe gaps , would that effect the final results? or did you just do that so the desing on the webflow canvas would match the live version

🔥🔥🔥🔥🔥

Amazing tutorial, love how you explained each bit so that I can customise the code myself. Just one question, how do I get this code on webflow. I see you used the sandbox, but is there a way to do this without the sandbox. i.e. where do I paste this code in webflow

This was super helpful. Hit like! Thank you. Question - what is codesandbox? What do you use it in conjunction with Webflow? Can achieve the same effect without using it?

@eli.alcaraz

11 ай бұрын

I see pros like Timothy Ricks use this too. But it all looks very intimidating. Maybe one video suggestion would be a Webflow+Codesandbox101 Overview.

@iljavaneck

11 ай бұрын

@@eli.alcaraz You can definitely achieve the same with just using the Webflow custom code section. The reason for Codesandbox is that you don't have to hit 'publish' in Webflow after every edit (and then wait for it to publish), But rather hit save in codesandbox, and immediately refresh your site to see the changes - this works much faster during the build process. When done, you take the code from csb and paste it in Webflow (or host them somewhere else if you like). I'll definitely create a short video soon that quickly covers how it works!

@jgustafe

9 ай бұрын

How do you create the codesandbox though. Which do you start with, react, vanilla, etc? That's where I'm stuck. @@iljavaneck

@iljavaneck

8 ай бұрын

@@jgustafe check out the latest video on my channel! It goes through all of those steps.

loved the video! But I have a question, does the webflow site need to be published for the slider to work? And the codesandbox, is it just a vanilla javascript template?

@shanmc777

7 ай бұрын

did you find it out, same problem here.

@iljavaneck

7 ай бұрын

@dianaatobe @shanmc777 Yes, the site has to be published for the slider to work. Custom JS doesn't work inside of the Webflow designer. And also yes, it's a vanillaJS template! You can check out my last video to learn more about how I use CodeSandbox

This is dope Ilja! Were you a developer before picking up webflow?

@iljavaneck

11 ай бұрын

Thanks! Had some basic knowledge on HTML, CSS and some JS from university :)

@iljavaneck, After cloning to my site i run into an issue where the slider stops once i hit the last item. Any thoughts on a fix for that? Thanks!

@iljavaneck

9 ай бұрын

To have a looping slider, I believe your total number of slides should be more than double the amount of slidesPerView. If this is not the case, the loop will probably behave in weird ways

Is there something special with the arrows that you didn't mention? I try to create some links block with icon inside, with the "swiper-btn-prev" class on them. But nothing happens when I click on them... :(

@iljavaneck

9 ай бұрын

Make sure you target the correct class names in your navigation parameter in Swiper, like I'm doing at around 11:50. If you have those set correctly, double check that there is no elements overlapping the buttons which prevent the user from clicking the buttons

This is awesome turtorial for me! I'am a UI designer and new in webflow, and want to become expert like what you did, so i want to ask.. how to become an expert webflow? whats programing language should i learn to make like what you did in ur instagram works. Thank you.

@iljavaneck

11 ай бұрын

glad you like it! Webflow allows you to visually manipulate HTML and CSS, so understanding that is key. I've heard good things about Flux Academy courses! When you have the basics covered, you can get more and more advanced by diving into custom coded interactions and animations

how do you connect navigation to swiperjs? for me it shows basic ones, and shows only previous button

Swiper slider at its purest form 🤌

@ilja Van Eck it does'nt work with my code ! Probably not plugged in correctly but don't know why ;(