Simon Lampert
Simon Lampert
  • 20
  • 111 803
SwiperJS PAGINATION - COMPLETE GUIDE [2024 Webflow]
Upgrade your Swiper sliders with pagination! Learn how to add progress bars, pagination bullets or fractional pagination counts - all within Webflow! This is part 3 of my SwiperJS for Webflow mini-series where you learn everything you need to know to build advanced sliders in Webflow.
👀 Check out my portfolio: simonlampert.com
🔥 Follow me on Instagram: simonwebdev
⚡ Follow me on X (Twitter) :
SimonWebflow
🌎 Connect with me on LinkedIn:
www.linkedin.com/in/simon-lampert/
📷 Timestamps
00:00 - Introduction
00:28 - Bullets pagination
10:24 - Disable pagination on dekstop
12:10 - Progress Bar
19:08 - Fractions
👍 Watch my other Webflow videos if you want to learn more, leave a like and subscribe if you think this tutorial was helpful.
See you next time!
มุมมอง: 959

วีดีโอ

CMS SwiperJS Slider in Webflow [2024 Guide]
มุมมอง 1.2K3 หลายเดือนก่อน
Learn how to make your SwiperJS slider CMS-driven in just a few minutes! This is part 2 of my SwiperJS for Webflow mini-series where you learn everything you need to know to build advanced sliders in Webflow. 👀 Check out my portfolio: simonlampert.com 🔥 Follow me on Instagram: simonwebdev ⚡ Follow me on X (Twitter) : SimonWebflow 🌎 Connect with me on LinkedIn: www.lin...
The ULTIMATE SwiperJS Guide [2024 Webflow]
มุมมอง 4.2K4 หลายเดือนก่อน
Learn how to build custom SwiperJS sliders in Webflow from scratch! Complete step-by-step video walkthrough with code explanations and SwiperJS documentation overview. Sliders are essential for many client projects, might as well build them like a Webflow Pro! 👀 Check out my portfolio: simonlampert.com 🔥 Follow me on Instagram: simonwebdev ⚡ Follow me on X (Twitter) : twitter.com...
Show/Hide Nav on Scroll | Boost UX with [2024 Webflow Pro Solution]
มุมมอง 2874 หลายเดือนก่อน
Looking to enhance your Webflow Navbar? In this video, I will show you how to implement a Show/Hide Nav on Scroll feature using Webflow and custom JavaScript code. This Webflow custom code solution is perfect for creating a seamless and dynamic navigation experience that boosts your site’s UX. You don't have to be a JavaScript pro to understand the setup as I will walk you through the entire cu...
The BEST way to build a NAV in Webflow?
มุมมอง 3054 หลายเดือนก่อน
In this video I am guiding you through my process of building navigation bars in Webflow. You will learn how to build efficient and robust navbars within minutes. My next video will be an extension of this one and showcase an advanced navbar technique. Stay tuned. I have been an official Webflow partner for over 3 years. 👀 Check out my portfolio: simonlampert.com 🔥 Follow me on Instagram: insta...
Relume Library for Webflow | COPY & PASTE Sections in Seconds
มุมมอง 6K2 ปีที่แล้ว
The Relume Library is a new tool for Webflow that lets you copy and paste sections directly into your Webflow project. In this video, I will create a landing page by using the prebuilt sections. As you will see, this is the fastest way you could possibly build a website in Webflow. 💻 Use Webflow for free: webflow.grsm.io/simonlampert ⚡ Check out the Relume Library: library.relume.io/?via=simon ...
What is the Webflow CMS | Beginner tutorial 2021
มุมมอง 1.1K3 ปีที่แล้ว
In this video, you will learn about the Webflow CMS. Content Management Systems allow you to edit, store and publish content in an efficient way. Still, you might not understand Webflow's CMS interface from the start. That's why I created this video. Hopefully, it will be helpful for you! 👍 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out the Relume Library: library.relume.io/?via=simon ...
LEARN MORE LINKS in Webflow | Beginner Tutorial 2021
มุมมอง 7643 ปีที่แล้ว
In this video, you will learn how to create a "Learn More" link in Webflow. To make this tutorial perfect for beginners I explained every single step of the process. After watching this video you will know how Webflow Interactions work and how to animate elements on hover. Additionally, I am giving a lot of practical tips and tricks to get better at Webflow. Hopefully, this video will be helpfu...
Add Grain Effect to your Webflow project | 2021 Tutorial for Webflow
มุมมอง 10K3 ปีที่แล้ว
In this video, I will show you how to add a grain effect in Webflow. The whole process will be explained. To make the grain overlay practical, we are going to add a CSS code snippet. No worries, I will also explain the code and show what it does. After watching my tutorial, you will be able to create your own grain effects in Webflow. Hopefully, this video will be helpful for you! 👍 💻 Use Webfl...
Gradient Underlines with Smooth Hover Animation | Webflow Tutorial 2021
มุมมอง 3.6K3 ปีที่แล้ว
In this video, I will show you how to create and animate gradient underlines in Webflow. We will add a smooth hover animation by using custom CSS code. I will guide you through the full process so that you will be able to create your own underline hover animations after watching my tutorial. Hopefully, this video will be helpful for you! 👍 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out...
BLUR GRADIENTS in Webflow | UI Trend 2021/20 Webflow Tutorial
มุมมอง 8K3 ปีที่แล้ว
In this video, I will show you how to create nice blur gradients in Webflow. I will guide you through the full process so that you will be able to create your own blur shapes after watching my tutorial. Hopefully, this video will be helpful for you! 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out the Relume Library: library.relume.io/?via=simon 🔥 Follow me on Instagram: si...
Crazy Webflow Slider Hack! Vertical Sliders Tutorial 2021
มุมมอง 3.3K3 ปีที่แล้ว
In this video, I will show you how to create a vertical slider in Webflow. To achieve this, we will have to trick the Webflow designer. I will start from scratch to guide you through the full process. Custom CSS code will be used, but no worries, every snippet is in the video description. Hopefully, this video will be helpful for you! 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out the ...
Connect STICKY SECTION to CMS | Webflow Tutorial 2021
มุมมอง 1K3 ปีที่แล้ว
In the last video, we created a nice sticky section in Webflow. But how can we connect a sticky section to a CMS collection? For this, we will need custom code. After watching this video you will be able to turn sticky sections from static to dynamic. You will understand the custom code snippet which you can just paste into an HTML embed element. I used to struggle with this but the solution is...
Create STICKY SECTIONS in 5 minutes | Webflow Tutorial 2021
มุมมอง 14K3 ปีที่แล้ว
In this video, I will show you how to create an awesome sticky section in Webflow. This takes only 5 minutes and it looks super clean. I will start from scratch to guide you through the full process. Position sticky is not the most intuitive thing if you are not familiar with CSS, but after watching this Webflow tutorial you will probably understand it and also know how to use it. Hopefully, th...
EMBED SVG ICONS in WEBFLOW *FAST* | Tutorial
มุมมอง 10K3 ปีที่แล้ว
In this video, I will show you how to create SVG embeds in Webflow so that you can easily change the color of icons. This takes only 2 minutes and you don't even have to know how to code! I use this all the time because it's so flexible. Hopefully, this video will be helpful for you! 💻 Use Webflow: webflow.grsm.io/simonlampert ⚡ Check out the Relume Library: library.relume.io/?via=simon 🔥 Follo...
DISABLE SCROLL While PRELOADER Animation! Webflow Tutorial 2021
มุมมอง 4.2K3 ปีที่แล้ว
DISABLE SCROLL While PRELOADER Animation! Webflow Tutorial 2021
PRELOADER ANIMATION in WEBFLOW | Easy Tutorial 2021
มุมมอง 6K3 ปีที่แล้ว
PRELOADER ANIMATION in WEBFLOW | Easy Tutorial 2021
4 AMAZING NAV LINK HOVER ANIMATIONS | Webflow Tutorial 2021
มุมมอง 16K3 ปีที่แล้ว
4 AMAZING NAV LINK HOVER ANIMATIONS | Webflow Tutorial 2021
Show the CURRENT PAGE in WEBFLOW! Navlink styling | Easy tutorial 2021!
มุมมอง 7K3 ปีที่แล้ว
Show the CURRENT PAGE in WEBFLOW! Navlink styling | Easy tutorial 2021!
LINK to SECTIONS on OTHER PAGES | Webflow Tutorial 2021
มุมมอง 14K3 ปีที่แล้ว
LINK to SECTIONS on OTHER PAGES | Webflow Tutorial 2021

ความคิดเห็น

  • @Rina-lc6hj
    @Rina-lc6hj 3 วันที่ผ่านมา

    Great explanation, thank you!

  • @Brlitzkreig
    @Brlitzkreig 27 วันที่ผ่านมา

    The video really starts at 1:40

  • @Brlitzkreig
    @Brlitzkreig 27 วันที่ผ่านมา

    You're really cute

  • @DAPH1918
    @DAPH1918 หลายเดือนก่อน

    Would the easier way to do this be to do the animation once and then copy and paste?

    • @simonlampert
      @simonlampert หลายเดือนก่อน

      True. But you can do it even faster: If you scroll down in the interactions panel you have the option to apply the animation to the class instead of just this element 👍

  • @kamranahmad5728
    @kamranahmad5728 หลายเดือนก่อน

    Nice Video. By the way: It can be done in webflow using webflow animations without using any javascript

    • @simonlampert
      @simonlampert หลายเดือนก่อน

      By the way: Doing it with Webflow animations sucks. This solution is way better

  • @wakemeupjpg
    @wakemeupjpg หลายเดือนก่อน

    youre my hero!!!!!!!!!!!!

  • @anyone6415
    @anyone6415 หลายเดือนก่อน

    it tells me I need a hosting plan does anyone else face the samething

  • @SharifulIslam-rw4kx
    @SharifulIslam-rw4kx 2 หลายเดือนก่อน

    Awesome, you are really amazing. Thanks

  • @RashedKhanMenon-u4w
    @RashedKhanMenon-u4w 2 หลายเดือนก่อน

    Thanks for this fantastic tutorial! It was super easy to follow, and I really appreciate how clearly you explained everything.

  • @skip_SportsLink
    @skip_SportsLink 2 หลายเดือนก่อน

    Thanks a lot!!, It works. But is there a way to have 2 different sliders on the same page? I tried to do this with different classes but I cannot let them both work at the same time.

  • @teresayang777
    @teresayang777 2 หลายเดือนก่อน

    Hi Simon, I have a question: after I clicked the link text and went to a different page, the underline animation stoped working. Only when I clicked the same link text again to reload the same page, the animation would work again. Do you know how to troubleshoot this?

    • @simonlampert
      @simonlampert 2 หลายเดือนก่อน

      Maybe you didn't apply the animation to the link element on the other page.

  • @BigheadSinan
    @BigheadSinan 2 หลายเดือนก่อน

    Build my first SwiperJs slider with the help of this video.

  • @ake.no102
    @ake.no102 2 หลายเดือนก่อน

    What if I want 2 different Swipers on the Page? I am currently searching a solution for this but I cannot really find anything to chage both sliders individually. Thanks in advance ;)

    • @skip_SportsLink
      @skip_SportsLink 2 หลายเดือนก่อน

      Did you find a solution?? I have the same question

    • @ake.no102
      @ake.no102 2 หลายเดือนก่อน

      @@skip_SportsLinksadly not, I‘m still trying

    • @skip_SportsLink
      @skip_SportsLink 2 หลายเดือนก่อน

      @@ake.no102 I found a solution!.. The first line of code is 'const swiper1 = new Swiper' change that to 'var swiper1 = new Swiper'.... You should replace the 'const' with 'var'!!! that's it.

    • @skip_SportsLink
      @skip_SportsLink 2 หลายเดือนก่อน

      @@ake.no102 I found a solution!, i can help you. Let me know

  • @Andres-Estrella
    @Andres-Estrella 2 หลายเดือนก่อน

    thanks

  • @SnakesRaven
    @SnakesRaven 3 หลายเดือนก่อน

    This was super helpful. I was struggling with creating/designing several instances and with replacing the navigation. Your approach makes it so much easier. Big thx!

  • @jamesrush2890
    @jamesrush2890 3 หลายเดือนก่อน

    Thank you very much for the only good custom slider tutorial where you go over how you did it and explain from the beginning. This also worked with my CMS too.

  • @deepanshmadhwani9043
    @deepanshmadhwani9043 3 หลายเดือนก่อน

    Hi Simon, appreciate these videos. A small tip: If you do not include Swiper's CSS file in the head, you wouldn't need to override the styles. Just matching the class name would work flawlessly. I learnt it the hard way lol

    • @simonlampert
      @simonlampert 3 หลายเดือนก่อน

      Interesting. I have had some situations in the past where I feel like the default styles where helpful. Will give this some thought.

  • @JannisTimm
    @JannisTimm 3 หลายเดือนก่อน

    Love this series, really helpful!

  • @WencelausMaina
    @WencelausMaina 3 หลายเดือนก่อน

    if you refresh it will only show one and take a few seconds to load

  • @DigitalDeskMedia
    @DigitalDeskMedia 3 หลายเดือนก่อน

    I'm sure its super basic, but showing what the blog_link item is would help super new people to follow along. Thanks for the video.

    • @simonlampert
      @simonlampert 3 หลายเดือนก่อน

      I appreciate your feedback! For sure it would help some people. When creating content you have to make decisions on what you want to include. I consider SwiperJS to be for intermediate/advanced Webflow users so I personally think it would be benefitial to focus on SwiperJS exclusively.

  • @jeremeywood9827
    @jeremeywood9827 3 หลายเดือนก่อน

    Thank you Simon! This, along with your last video, helped me get started with Swiper JS in Webflow. Seems like I started at just the right time.

    • @simonlampert
      @simonlampert 3 หลายเดือนก่อน

      Great to hear!

  • @JannisTimm
    @JannisTimm 3 หลายเดือนก่อน

    Really great Video, i was looking for a swiper basic tutorial and this perfectly covered my needs. Looking forward to see more I was watching alot of videos from you earlier with Jonas or from Finsweet. Great to see ur back

    • @simonlampert
      @simonlampert 3 หลายเดือนก่อน

      Thank you 🤝

  • @joergfrank
    @joergfrank 3 หลายเดือนก่อน

    Nice one, keep it on :)

  • @sergiorecabarren
    @sergiorecabarren 3 หลายเดือนก่อน

    Hello Simon! Thanks a lot for the script. It works great. I’ve run into an issue and I wonder if you could help. Is it posible to modify the script in a way that when I use anchor links from the footer of a page the nav component stay hidden so it doesn’t cover the top of the content when the scroll from the link reaches the anchor? Thanks in advance!

  • @claudeatkins4082
    @claudeatkins4082 4 หลายเดือนก่อน

    Really helpful thanks Simon, learned a lot here. One thing to add is that spaceBetween can be set in % which is a tiny bit better for responsiveness in my experience

  • @Nklsrth
    @Nklsrth 4 หลายเดือนก่อน

    Awesome 👏🏽 thanks

  • @dusandjordjevic701
    @dusandjordjevic701 4 หลายเดือนก่อน

    awesome, cant wait for next episode 💯

  • @supercharge.studio8053
    @supercharge.studio8053 4 หลายเดือนก่อน

    Awesome vid, thanx

  • @hussmohamad
    @hussmohamad 4 หลายเดือนก่อน

    Nice work Simon, really helpful.

  • @iTubeFF
    @iTubeFF 4 หลายเดือนก่อน

    Fantastic! Exactly what I need right now. Danke, Simon!

    • @simonlampert
      @simonlampert 4 หลายเดือนก่อน

      Great to hear 💪

  • @engindemir593
    @engindemir593 4 หลายเดือนก่อน

    Looks good

  • @dragonlore7574
    @dragonlore7574 4 หลายเดือนก่อน

    Have you tried Divhunt yet, and what is your opinion as Webflow alternative?

  • @denis-calei
    @denis-calei 4 หลายเดือนก่อน

    The idea of storing the components with the changes already made is genius. Why didn't I think of it earlier? Thanks!!

  • @jonasarleth
    @jonasarleth 4 หลายเดือนก่อน

    Impressive, that you work with keyboard only 😂

    • @simonlampert
      @simonlampert 4 หลายเดือนก่อน

      I mostly do actually, but I also messed up and my cursor wasn‘r recorded 😂

  • @roving-camera_72
    @roving-camera_72 5 หลายเดือนก่อน

    Great tutorial. I would probably use images in the right side with some text on the left to create a single page gallery. Thanks for sharing this!

  • @HannaDubyna
    @HannaDubyna 5 หลายเดือนก่อน

    Thank you, dear!

  • @abhiprajapati2498
    @abhiprajapati2498 5 หลายเดือนก่อน

    awesome video thanks Simon

  • @ct7483
    @ct7483 5 หลายเดือนก่อน

    Using this tutorial in 2024, thanks so much for sharing your knowledge with us!

    • @simonlampert
      @simonlampert 5 หลายเดือนก่อน

      @@ct7483 Thank you!

  • @creativemindloveworks
    @creativemindloveworks 6 หลายเดือนก่อน

    So this means even if the client needs more later for scale this would be easy with the library to add without managing snippets ? I heard the Hanse long from all the snippets is time consuming and confusing. Can/his can I avoid snippets at all?

  • @whatsgoinon150
    @whatsgoinon150 6 หลายเดือนก่อน

    This solution is not suitable for a good site perfomance, maybe works optically but regarding other expects like page loading etc. it is not good

    • @simonlampert
      @simonlampert 6 หลายเดือนก่อน

      You are right. It‘s an old video

    • @ojoosama
      @ojoosama 6 หลายเดือนก่อน

      ​@@simonlampert Do you have a solution that works for site performance as well now? Please help

    • @simonlampert
      @simonlampert 6 หลายเดือนก่อน

      @@ojoosama I would recommend using Finsweet Attributes „Disable Scroll“ solution.

    • @ojoosama
      @ojoosama 6 หลายเดือนก่อน

      @@simonlampert thank you so much

  • @crystalloh6556
    @crystalloh6556 7 หลายเดือนก่อน

    it doesn't work for me 😭

  • @WilfredoXavier.M
    @WilfredoXavier.M 7 หลายเดือนก่อน

    Thnks bro! Finally one tutorial that works at 1st attemp

  • @garethellison01
    @garethellison01 8 หลายเดือนก่อน

    Hardly ground breaking! But man, it works! Thank you! Simple yet effective. Adding a wee top layer over it as well to add colour or patters looks really cool! 😎 Top man! Thank you again. 😀

  • @leonaeli3300
    @leonaeli3300 9 หลายเดือนก่อน

    hey thank you very much for your useful video - how did you get this view of the page source? (minute 2:00) I only know the regular developer tool of chrome...thanks for your answer!

  • @alzibaba
    @alzibaba 9 หลายเดือนก่อน

    This is a great solution, thanks so much! Super easy and a nice effect.

  • @sfgtechsolutions
    @sfgtechsolutions 10 หลายเดือนก่อน

    Great vid Brother well done

  • @developermsmahadi
    @developermsmahadi 10 หลายเดือนก่อน

    Thanks

  • @amcds2867
    @amcds2867 10 หลายเดือนก่อน

    Very helpful. Sometimes it's hard to find a tutorial on how to do the easiest things.

  • @jeremiask.4295
    @jeremiask.4295 11 หลายเดือนก่อน

    Perfect tutorial, highlight on hovered link is what I searched!

  • @regeswww
    @regeswww ปีที่แล้ว

    Good Exemple and thanks for the video. I found another solution for my problem and I hope that help someone too: I've just changed the position Absolute to Fixed in "preloader" div.

    • @whatsgoinon150
      @whatsgoinon150 6 หลายเดือนก่อน

      This is not the best solution, as with fixed, you can still scroll on the site and end up on a lower section after the animation. For some animation that play with the background color of the hero it will look messy then.