Creative Slider Carousel - Elementor SwiperJS Slider Tutorial

(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)

Don’t want to make from scratch? Get the template instead 🙂

Custom Sliders Carousels – Elementor Free Template
Elementor Templates
$0.00

Introduction – Making Creative Effect Slider Carousel with Elementor and SwiperJS

In this tutorial, we will use the most versatile effect of swiperjs called “creative”. It allows us to have

Layout for containers or DIV:

The main layout is having a swiper container, inside it should be swiper-wrapper and inside swiper-wrapper should be slides. The swiper navigation container is optional, you can directly add Arrow icons and swiper-pagination in swiper container directly.

Creative Swiper Slider
by DMmotionarts

Support by
using these links
(Affiliate)

Start Earning by becoming an Elementor Affiliate

This slider is most versatile one and allows to create custom effects. Please watch video to understand it better. Only 1 effect is shown below but it can be customized a lot.

Creative Slider Code

.dm-creative-swiper is the CSS class for the main container that has all the slides, navigation, and pagination.
direction allows you to choose between horizontal and vertical direction for your slider.
loop can be set to true/false to enable or disable looping.
To add more features, refer to the “Custom Carousel” blog post or its video to learn how to customize further. Link – https://dmmotionarts.com/custom-base-slider-with-autoplay-elementor-swiperjs-slider-tutorial/
wrapperClass is used to use custom CSS class for our swiper-wrapper. This is important as we don’t want elementor swiper styling to be applied here.
slideClass is used to use custom CSS class for our slides. Important for the same reason as above.
nextEl and prevEl is the CSS class that we use for navigation buttons. It can be added to any icon, image or text.
In pagination, el: allows us to specify which container/div is our pagination container.
We have different pagination types available. You can read or watch video on “Custom Carousel Blog Post” page.
Following are the Creative Effects that we can customize:
– All properties in prev are added to the left slide of the active one. And Next is added to the right slide of active one. The active slide would have all values as 0 by default.
– translate : allows to specify x,y,z offset in 3D space.
– rotate : rotate slides to x,y,z in 3D space
– scale : size of the slides
– opacity : how transparent/visible your slides should be

				
					<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css" integrity="sha512-pmAAV1X4Nh5jA9m+jcvwJXFQvCBi3T17aZ1KWkqXr7g/O2YMvO8rfaa5ETWDuBvRq6fbDjlw4jHL44jNTScaKg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" integrity="sha512-Ysw1DcK1P+uYLqprEAzNQJP+J4hTx4t/3X2nbVwszao8wD+9afLjBQYjz7Uk4ADP+Er++mJoScI42ueGtQOzEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>

window.addEventListener("load", (event) => {
      
    const swiper = new Swiper('.dm-creative-swiper', {
      // Optional parameters
      direction: 'horizontal',
      loop: false,
      grabCursor: true,
      mousewheel:false,
      
      effect: "creative",
      creativeEffect: {
        prev: {
          shadow: true,
          translate: ["-20%", 0, -1],
          rotate: [0, 0, 0],
          scale: 1,
          opacity: 1,
        },
        next: {
          shadow: true,
          translate: ["100%", 0, 0],
          rotate: [0, 0, 0],
          scale: 1,
          opacity: 1,
        },
      },
      
      // Wrapper and slide class
      wrapperClass: 'dm-creative-swiper-wrapper',
      slideClass: 'dm-creative-swiper-slide', 
      
     
     //Slides to show
     //Use 'auto' to automatically get size
   
    
    navigation: {
    nextEl: ".dm-creative-swiper-next",
    prevEl: ".dm-creative-swiper-prev",
  },
  pagination: {
    el: ".dm-creative-swiper-pagination",
    type: "fraction",
  },
  
   breakpoints: {
       
       1024: {
           
           spaceBetween: 0,
       },
       
        767: {
            
          spaceBetween: 0,
        },
        
        0: {
            
          spaceBetween: 0,
          
        },
      },
  
    });
    
 });    
    
    
    
</script>

<style>

    .dm-creative-swiper-wrapper .e-con.e-flex{
        
        flex-shrink: 0 !important;
    }
    
    .dm-creative-swiper-pagination {
        
        max-width:10% !important;
    }
    
    .dm-creative-swiper,
    .dm-creative-swiper-wrapper
    
    {
        
        transform-style: preserve-3d;
       
    }
    
    .dm-creative-swiper-slide {
        
        
      
    }
    
    .dm-creative-swiper-prev,
    .dm-creative-swiper-next {
        
        cursor: pointer;
        
    }
   
    
</style>