Infinite 3D Swiper

Step 1: Add a container and a wrapper

Grab a div, place it in the body of your page and give it a class of swiper-container with these settings:

  • Margin (Top and Bottom): 50px
  • Width: 100%
  • Transform settings > Distance: 1500px

Now add a div inside the container and give it a class of swiper-wrapper with these settings:

  • Display > Flex, Horizontal, Align:Stretch, Justify:Start

Step 2: Create the cards

Place a div in the wrapper and give it a class of swiper-slide with these settings:

  • Sizing: don't shrink or grow
  • Width: 320px
  • Min Width: 0px
  • Overflow: hidden
  • Border Radius: 10px

Add inside another div with the class picture"and t-1'with these settings:

  • Width: 320px
  • Height: 320px
  • Overflow: hidden

Now set as a background your picture and give it the following settings:

  • Size: Cover
  • Position: Center
  • Tile: Don't tile
  • Not fixer

Duplicate the div swiper-slide inside the swiper-wrapper for every card you want to create.

⚠️ Every time you duplicate this div, change the picture 's combo class from t-1 to t-2 and so one.

Step 3: Add the custom code

We’ve created all the elements we need, so now we can add the actual functionality through the JavaScript code snippet.

Our custom code will live both inside <head> tag and before </body> tag.

in the inside <head> custom code section of the page, add this code:

<style>
.swiper-container {
overflow: hidden;
}
.swiper-slide {
width: 320px;
}
.swiper-container-coverflow .swiper-wrapper{
   -ms-perspective:1200px
}
.swiper-container-3d{
   -webkit-perspective:1200px;
   perspective:1200px
}
.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{
   -webkit-transform-style:preserve-3d;
   transform-style:preserve-3d
}
.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{
   position:absolute;
   left:0;
   top:0;
   width:100%;
   height:100%;
   pointer-events:none;
   z-index:10
}
.swiper-container-3d .swiper-slide-shadow-left{
   background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
   background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));
   background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));
   background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))
}
.swiper-container-3d .swiper-slide-shadow-right{
   background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
   background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));
   background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));
   background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))
}
.swiper-container-3d .swiper-slide-shadow-top{
   background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
   background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));
   background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));
   background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))
}
.swiper-container-3d .swiper-slide-shadow-bottom{
   background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));
   background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));
   background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));
   background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))
}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{
   bottom:10px;
   left:0;
   width:100%
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{
   left:50%;
   -webkit-transform:translateX(-50%);
   -ms-transform:translateX(-50%);
   transform:translateX(-50%);
   white-space:nowrap
}
.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
   -webkit-transition:.2s left,.2s -webkit-transform;
   transition:.2s left,.2s -webkit-transform;
   -o-transition:.2s transform,.2s left;
   transition:.2s transform,.2s left;
   transition:.2s transform,.2s left,.2s -webkit-transform
}
.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
   -webkit-transition:.2s right,.2s -webkit-transform;
   transition:.2s right,.2s -webkit-transform;
   -o-transition:.2s transform,.2s right;
   transition:.2s transform,.2s right;
   transition:.2s transform,.2s right,.2s -webkit-transform
}
</style>

Then, in the before </body> custom code section of the page, you’ll add this script:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js"></script><script>
var swiper = new Swiper(".swiper-container", {
 effect: "coverflow",
 grabCursor: true,
 centeredSlides: true,
 slidesPerView: "auto",
 coverflowEffect: {
   rotate: 20,
   stretch: 0,
   depth: 350,
   modifier: 1,
   slideShadows: true
 }
});
</script>

That’s it! Now publish your website and enjoy the results.

Step 4: Customize your swiper

At this point, your slider should look like this:

You can customize how your swiper works by adding a few lines of code.

Start from the middle: If you want it to start from the middle instead of from the first card, insert the following line in Before </body> tag

initialSlide: 3,

(Increase that number if you add more cards in your slider).

Loop : if you want to enable continuous loop mode, insert the following line in Before </body> tag

loop: true,

Click to slide: if you want to click on any slide to produce a transition to this slide, insert the following line in Before </body> tag

slideToClickedSlide: true,

👉 Visit swiper.js's API documentation to discover all the available customizations

Short Description:
Create an infinite card slider in Webflow using a simple Swiper.js snippet