How does this Swiper work?

Hi all,

There is a wonderful card interaction built by @Cjh which I found here: https://webflow.com/website/Swiper-Showcase-Example

I just cannot figure out how the slider has been implemented. It works as a clone, but I cannot see any interactions, code embeds or code in the <head> or </body> tag)

When I copy it across to my website, the cards sit glued to each other, as seen in the Webflow preview of the Swiper-Showcase-Example.

Any pointers would be greatly appreciated :relaxed:

Cheers,
K

Good afternoon @kiki, This is a great tool and I have just added it to my arsenal as well.

I am attaching a video and hope this helps you in your project?

CloudApp

1 Like

Hi @QA_Brandon ! Thank you so much for taking the time to make a video.
It’s very helpful. I’ve been using Webflow for years, and it just didn’t occur to me to check the home page settings :see_no_evil:

I copied over the slider to my website, but it automatically renamed 4 elements to avoid conflicts. I suspect this could be the reason why the code is not working?

https://preview.webflow.com/preview/uncorde?utm_source=uncorde&preview=c166541741d31682c3b00cee0e6c5f9d&mode=preview

Cheers,
K

Yes, that would be it exactly. If it renamed it, just reference the original and change the difference classes on your site.

That should fix your issues.

@QA_Brandon Appreciate your input :relaxed: – I’m still not able to crack which classes to change. The only difference seems to be swiper-container-3 and swiper-slide-2 but changing it hasn’t fixed it yet.

Code is not my strongest forte but I will keep trying. Thanks again for looking into it!

Cheers,
K

Hi please send me an updated share link for ur project that has that code and data in? I will debug and let u know

Hi there, here’s the updated link:

https://preview.webflow.com/preview/uncorde?utm_source=uncorde&preview=bc4d2ef7c022e2a930b591f08c447c66&mode=preview

Cheers,
K

Hi,

Since I cant save any changes, looks like the main issue is that you are missing “-3” on the JS script.

It should read “.swiper-container-3” and it is missing the “-3”.

If you add that and then save and publish to live site it should work.

LMK.

Happy Designing!

@QA_Brandon - I couldn’t rename the class but fixed it by swapping the class to the original swiper-container and swiper-slide that was sitting in the Nav dropdown.

For some reason Webflow remembered the previous time I had copied the cards over.

Works perfectly now: https://preview.webflow.com/preview/uncorde?utm_source=uncorde&preview=85bf66260d0cf8937b08c13aaacab22f&mode=preview

Thanks again for your time!

Cheers,
K

Yes it does every time. Just need to clear ur classes!

This did not work for me unfortunately…
The class names are the same as in original and I copied the and code but still doesn’t work

Could you provide a share link @anj2019 so that I may see whats going on in your project?

@QA_Brandon
Here’s the link: https://preview.webflow.com/preview/swiper-1a36ea?utm_medium=preview_link&utm_source=designer&utm_content=swiper-1a36ea&preview=30ff5fc2882cf1aff3ecebb673dbf1ac&mode=preview

Hi @anj2019,

Thanks for your link. Looks like it is the cloned project. You will need to publish the site for the swiping function to work. If you are trying to get it to work in preview mode, IT will NOT!

LMK, if you have any other questions?

Brandon

Thanks @QA_Brandon. It’s working now. Would you know how to make the active photo the 3rd image for example? Instead of the 1st image.

Thanks!

Hi @anj2019,

Your link no longer works.

Yes I used it for this page: https://edeska-2019.webflow.io/edeska-about-us
In the 2nd section

Hi @QA_Brandon

I have the same question as @anj2019 : how to make the active photo the 3rd image with this swiper ?
Could you help me please ?

Thanks!

JB

Hey there @WebDev_Brandon… would you mind reposting your video of how to get the 3D and sliding to work on this pleeeease? I’d be very grateful. :slight_smile:

1 Like