Advanced Swiper Slider in Webflow

Тәжірибелік нұсқаулар және стиль

Watch an introduction to Swiper Sliders at • Ultimate CMS Slider fo...
Get the cloneable for this project (affiliate link)
webflow.grsm.io/swiper
Timestamps:
00:15 - Setting up the structure
04:53 - Overflow from right side only
06:52 - Setting up the javascript
07:25 - Swiper effects
09:04 - Number of looped slides
10:27 - Configuring controls
10:37 - Setting the active styles
11:22 - Linking two sliders together
12:33 - Swiper thumbs control
13:06 - Swiper events & properties
16:57 - Responsiveness
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

Пікірлер: 47

  • @michaelpowis
    @michaelpowis Жыл бұрын

    Every single one of your video contains years worth of knowledge and you make it so easy to digest. Legend

  • @EdgarAntonioHez
    @EdgarAntonioHez Жыл бұрын

    Incredibly thorough from the classes to the code and even the responsive ! I was able to replicate it 100% and learn a lot from it. Thank you so much Timothy, I will join the patreon group as soon as I can.

  • @dorianakalaj
    @dorianakalaj Жыл бұрын

    I can't thank you enough for the immense value I get from your videos! In addition to the usefulness of your video topics, you also have a special talent for explaining complicated concepts! Thanks!!!

  • @GourmetBytes
    @GourmetBytes Жыл бұрын

    Looks amazing! So excited to try this out! Tim your always giving so much value💯💯💯

  • @soulglowdeej
    @soulglowdeej Жыл бұрын

    Tim, you're incredible for the Webflow community. Thanks SO much for everything you give....you're amazing. As you've worked with the CMS here, are there any plans to show us mere mortals how to implement next/previous buttons, so people can easily navigate through a collection of projects/blogs/etc. (I can't believe this isn't standard for something as good as webflow...Finsweet and Refokus have something, yet I'm sure lots of people would (well, I would!) love to see how you do it ;) ) Thanks again for everything :)

  • @thewebart
    @thewebart Жыл бұрын

    Thank you Tim!!!

  • @geoffdawes6529
    @geoffdawes6529 Жыл бұрын

    Unreal!!!! 🙌

  • @jamesmabrown
    @jamesmabrown Жыл бұрын

    Brilliant video Tim. If I put an html video component in the slides, is there a way to pause it whilst it isn't an active slide?

  • @tethron.
    @tethron. Жыл бұрын

    Really nice to see more types of sliders like this

  • @timothyricks

    @timothyricks

    Жыл бұрын

    Thanks! There’s also a third one I designed in the cloneable.

  • @fabifabi3371
    @fabifabi3371 Жыл бұрын

    Great tutorial, I have a question. Is custom code required to make this work? I get stuck a lot since I'm fairly new to webflow, but I would like to try this for a site im working on without purchasing a site plan first. Possible? Also, can I just copy in the CMS collection you used to then change the picture and text without changing the code? Thank you!

  • @allthingsgjd
    @allthingsgjd Жыл бұрын

    Hey Tim, beautiful job, what a fantastic slider. 😍 Are you basically recommending this as a superior option to the slick slider?

  • @timothyricks

    @timothyricks

    Жыл бұрын

    Thank you, and good question! Yes, Slick slider hasn’t been updated in a while. Swiper is the most powerful when it comes to features.

  • @carrilagency

    @carrilagency

    Жыл бұрын

    Beautiful work 😊 But experienced some issues with the space %. It seems not work. I will run it by you on patreon.

  • @goldenant9450
    @goldenant94509 ай бұрын

    i'm always tempted to use %'s but when I check SEO it always suggests having defined dimensions bc percentages take longer to load - which makes sense to me. What are your thoughts on this?

  • @arminik
    @arminik Жыл бұрын

    Would you please do a tutorial on how to create custom email signature design in Webflow and copy paste the live version to Gmail? Thank you and love your content, keep up the amazing work ❤

  • @JoepSwagemakers
    @JoepSwagemakers4 ай бұрын

    I love the video but for me as a newbie it's too fast and I'm missing big parts in the explanation on how things with the code. Personally I don't need the CMS part but will the code also work with just div's that hold the images?

  • @felixgonzales4273
    @felixgonzales4273 Жыл бұрын

    How can I make it animate and auto loop? please

  • @system2213
    @system2213 Жыл бұрын

    Hey Timothy. Webflow's native slider allows interactions that are triggered by slider change, i.e. when a specific slide comes into view, I can affect change on any other element that I want to. Is there a way to achieve this with Swiper?

  • @timothyricks

    @timothyricks

    Жыл бұрын

    CSS transitions are usually best for this, but you can also use css animations. When swiper adds the active class to the slide, anything inside that slide can be animated based on the class. There’s probably some hacky ways to tie WebFlow interactions to slide change also with swiper slide change events and .click() on a hidden trigger div inside the active slide.

  • @rjm199x
    @rjm199xАй бұрын

    was there any way to customize the animation like it bounce and the movement of images are vertical?

  • @Sergy_Kondrashin
    @Sergy_Kondrashin Жыл бұрын

    🤯🤯🤯 🙌🏻👑💪🏻

  • @yannnnfc
    @yannnnfcАй бұрын

    Can I make this slider without CMS? Is it necessary to use CMS? Thank you

  • @bookcamp
    @bookcamp4 ай бұрын

    Hi Timothy. Late to this party, but I am wondering if there's a way for me to enable the Super Slider to mouse/swipe scroll up and down the page, rather than get stuck scrolling the slider left to right? Beautiful work you did on this. Thanks!

  • @bookcamp

    @bookcamp

    4 ай бұрын

    Ah, nevermind... I see I can set mouse scroll to false on the JS in page settings. Duh. Brilliant slider. Your brain is on another level!

  • @alanalston
    @alanalston2 ай бұрын

    Wow. That's all, really.

  • @edwardconan4810
    @edwardconan48105 ай бұрын

    I‘m at minute 7:20 and I only get 1 slide. Not per view but just 1. When I slide it just goes to empty and at the bottom right where the little images are there‘s only the first and all others are gone. I‘ve been trying to figure this out for hours now and haven‘t found anything. Can someone help me?

  • @nickfloats
    @nickfloats Жыл бұрын

    This is amazing! I'm playing around with the clonable and keep running into a bug I can't seem to fix. When I click on a swiper-slide item, sometimes it navigates in the opposite direction. It's happening on all of the page examples (slider gallery, slider main, and slider releases page). Any idea what might be causing this? Appriciate all that you do!

  • @timothyricks

    @timothyricks

    Жыл бұрын

    Thanks Nick, and good question! I think this might happen if you click on a duplicated looped slide. It takes you back to the non-duplicated version of the slide. To avoid that, loop mode would probably need to be disabled.

  • @nickfloats

    @nickfloats

    Жыл бұрын

    @@timothyricks hmm, tried that but still running into the same issue. ill keep playing with it!

  • @greenfleshyflower
    @greenfleshyflower Жыл бұрын

    Hey there - how do you do in-page linking on these titles? Since it's all linked to the Collections

  • @Galperinjourn

    @Galperinjourn

    Жыл бұрын

    hey :) any chance you found the answer? thanks!

  • @greenfleshyflower

    @greenfleshyflower

    Жыл бұрын

    @@Galperinjourn hey there, yes it was easier than I thought, I made a Link Block under "swiper-slide" that contains "slider-titles_heading". Made a new CMS to link it to in the Link Block settings

  • @Galperinjourn

    @Galperinjourn

    Жыл бұрын

    @@greenfleshyflower that's right, yeap, thanks... i'm thinking, if there is a way to do it without a CMS collection at all. do you think it's possible?

  • @greenfleshyflower

    @greenfleshyflower

    Жыл бұрын

    @@Galperinjourn well yes, in Link Settings (the gear when you hover over the Link Block you've created) you have options to Link it to whatever you want

  • @mucmuc3849
    @mucmuc3849 Жыл бұрын

    Great job, thanks. But could you please check the swiper dots and have a look on an Ipad. The dots are streched and looking not correct

  • @mucmuc3849

    @mucmuc3849

    Жыл бұрын

    anybody else got a solution for this problem?

  • @Iastrebner

    @Iastrebner

    Жыл бұрын

    I think that's because of the native attributes on mobile. It's something related to margin/padding. You can check it out in the inspector.

  • @mucmuc3849

    @mucmuc3849

    Жыл бұрын

    @@Iastrebner checked and really tried everything. did not found the solution.

  • @Iastrebner

    @Iastrebner

    Жыл бұрын

    @@mucmuc3849 If you send me the link I can check it out

  • @FairBeggar
    @FairBeggar Жыл бұрын

    No matter what I do I can't get the background image to slide on scroll. Text yes but background remains.

  • @lukevanderwalt5491

    @lukevanderwalt5491

    Жыл бұрын

    Did you manage to solve this issue yet? Having the same headache.

  • @nickdemore1697
    @nickdemore1697 Жыл бұрын

    My bgSwiper is not linked to the other swipers and is not moving when the text or thumbs swiper moves.

  • @nickdemore1697

    @nickdemore1697

    Жыл бұрын

    I decided to delete the text swiper and titles component because I don't really need the text. Since you were making the text swiper the main controller I did what I could to do the same for the thumbs swiper in hopes that I can link the bgswiper with the thumbsswiper in the same manner as the thumbsswiper was originally linked to the textswiper. but it didn't work. is there potentially something about having this gallery in a page with other sections, webflow scroll interactions etc?

  • @Louis-nv9ny

    @Louis-nv9ny

    Жыл бұрын

    @@nickdemore1697 Hi! bro! I solved this problem! I checked the code again, I found that I forgot to copy the code in the "Insidetag", I copied it in my page settings and it worked!

  • @nickdemore1697

    @nickdemore1697

    Жыл бұрын

    @@Louis-nv9ny interesting! happy it worked for you. do you mean the you had the code in both the site settings and individual page HTML?

  • @DimonPockemon18
    @DimonPockemon18 Жыл бұрын

    Thanks a lot!! It’s for me a such of useful tips. I’m just beginner in WF and a lot of Ukrainian people leaves russian platforms and choose another and sometimes it’s so much struggle with details, so thank you for sharing interesting video and life hacks 🫶🏼

Келесі