Create a Slider with Swiper JS in Webflow

Today, we are importing Swiper JS in Webflow !
Chapters :
00:00 Intro
00:16 Installing Swiper JS
08:40 Creating a one page
13:00 Events and Swiper classes
17:22 Outro
------------
We created a series of courses for freelancers, web designers, Webflow developers, and business builders.
CREATE HIGH-END WEBSITE FROM A TO Z ► www.tambien.studio/courses/bu... (Coming Soon)
------------
Discover the behind the scene of the studio with our weekly podcast
PODCAST ► open.spotify.com/show/5CYRfeq...
------------
Stay up to date with our latest news by joining our Newsletter:
NEWSLETTER ► www.tambien.studio/newsletter
------------
Share with our community on Discord :
DISCORD ► / discord
------------
We created free tools to help Webflow developer to have an easier life:
Our Style Guide ► www.tambien.studio/products/s...
Fluid Responsive ► www.tambien.studio/products/f...
------------
Other links
WEBSITE ► www.tambien.studio
TWITTER ► / tambien_studio
LINKEDIN ► / tambienstudio
INSTAGRAM ► / tambien_studio

[@webtotheflow]

Love this man! Thanks for the inspiration! 🙏🏾 So many possibilities going into those event listeners before entering the next slide 🚀

[@user-pq5nb3hp1d]

Amazing! Thank you for this video.

[@olaidemuheeb6711]

Thank you 😊

[@taywoo8216]

Nice, well done! I’ve used the scrollify library before and encountered quite a few bugs, this might be a better alternative

I'm glad you like it, i tried Scrollify and FullPage.js as well but i found Swiper.js to be the best option between the three ! 🙂

[@deltaa5713]

bONJOUR ! , pour quand la sortie de la formation :) ?

[@flairrene]

That's just great. 👍 Do you mind to share a webflow view only / clone Link? It would be very helpful for recreational learning experience. Thanks Rene

[@shivudesign9210]

Amazing tut also Are you providing assests?

[@user-wz9om1wf2k]

How do i add bottom nav to mobile slider so that i can change slides manually or with buttons

[@emmanuelmaillot8617]

Bonjour, super tutoriel ! Je me demandais si l'on pouvait bloqué le swipe avec un évènement clique sur un bouton qui serait dans le swipe. Par exemple si l'on fait apparaitre une pop-up le swipe se bloque. J'ai essayé de le faire en passant par le Class Adder de Finsweet et je ne vois vraiment pas comment faire ? Si tu as une piste sur le sujet sa m'intéresse.

[@PianoFAB95]

Super astuce, merci ;) Oui c'est un peu cramé l'accent français :D

[@user-pq5nb3hp1d]

I recreated this slider, but I had a problem when I added interactions (hovering over links) made on the webflow. In the webflow viewer, the interactions work, but in the browser they do not play. Can you tell me how to fix it?

[@alembukvich3240]

Awesome! Do you mind sharing where we can find similar videos like the one you used in the background?

Glad you like it 🙂 I made this in Blender, i dont know where you can find this kind of video, i don't mind sharing this one with you, dm me if you want !

[@alembukvich3240]

@ YES, PLEASE! Is email fine?

@@alembukvich3240 Yes, you can send me an email at [e-mail] !

[@Hmdbln]

hey, thanks allot for the video! i am curious if you also had problems with using the touchpad to scroll and it swipes more than one slide at a time, i looked through github and other sites and found no solutions, any idea on how to fix that?

I didn't have any problem with it, i'll try and see if i find something about it and let you know !

[@Kevinpips1]

Bro I did everything you did but nothing is working

Can you explain us more ?

[@Kevinpips1]

Or is there something you are not telling us

It would be easier for me to help you if you gave me a bit more detail, do you have an error message in the console, did you successfully imported and installed Swiper.js or nothing worked from the beginning ?

[@alessioquintarelli4822]

@ i tried following each step and it doesn't work for me too. literally checked in and copy pasted the code directly from swiper.js page. it does not work from the very beginning.

[@emmanuelmaillot8617]

Salut ! J'écris en français car je sais que tu comprend la langue. J'ai le même soucis que mes comparses, j'ai copié les codes dans la page et apparemment Webflow ne prend pas en compte les codes alors je ne sais pas pourquoi mais cela ne fonctionne pas. Je précise que je suis en abonnement Freelancer. Si ta une solution pour régler ce petit soucis cela m'intéresse. Merci en tout cas pour ta vidéo.

[@emmanuelmaillot8617]

C'est moi j'ai fait une erreur dans le code. En faite j'ai oublié de mettre la majuscule à 'new Swiper'. Cela change tout du coup.

[@ismaelvaz0031]

I don't think he did it fast enough for us to actually do it with him. took me three hours to get through the first 10 minutes. lol what a waist of time.

If you are not happy with the Channel I recommend you go to see other creators. Always cool to deliver free content to people and received a “what a waste of time” Seeya,