Swiper JS 3D Cube Help

Design help Custom code
1

Hi,

i want to create a 3D Cube Swiper like this in Webflow:

https://swiperjs.com/demos/230-effect-cube.html

I did some research and added custom code to do the cube effect.
Sadly it doesn’t work out… Can someone please help me?

Here’s the link to my site:
https://webflow.com/website/3D-Cube-Swiper-JS?s=mobil-9a7b90#

Thanks a lot!

I am looking forward to your help.

2

Write this:

<style>
<link rel="stylesheet" href="https://unpkg.com/swiper@5.3.6/css/swiper.min.css">
</style>

Like this (Remove style wrapper):

<link rel="stylesheet" href="https://unpkg.com/swiper@5.3.6/css/swiper.min.css">

Next put swiper-pagination element inside swiper-container.

Also add live URL (No way to test custom code by read only link).

1 Like
3

Hey Siton, this is the live url:
https://preview.webflow.com/preview/mobil-9a7b90?utm_medium=preview_link&utm_source=designer&utm_content=mobil-9a7b90&preview=1556e38c09c9d3e7036ba698eb26a339&mode=preview

thanks for your help!

4

Live = Publish URL (Not read only link) (blabla.io)

5

https://mobil-9a7b90.webflow.io/

6

Again remove the style tag.

image

And “again” put the pagination inside the wrapper.
image

Last because you use for this effect on empty divs - the height collapse - add the height to swiper-container.

7

Thanks for your quick reply. I changed everything, but i still can’t see any cube. Do you have any idea what’s wrong?

8

is there anyone who can help me?