Login With Github

Swiper API: 4 Cool Effects

Fade Effect

Fade Effect Parameters

Be sure to have the `effect` param set to `fade` in order for this to work.

Parameter Type Default Description
fadeEffect object  

Object with Fade-effect parameters. For example:

var mySwiper = new Swiper('.swiper-container', {
  fadeEffect: {
    crossFade: true
  },
});

 

{
crossFade boolean false Enables slides cross fade
}

Coverflow Effect

Coverflow Effect Parameters

Be sure to have the `effect` param set to `coverflow` in order for this to work.

Parameter Type Default Description
coverflowEffect object  

Object with Coverflow-effect parameters. For example:

var mySwiper = new Swiper('.swiper-container', {
  coverflowEffect: {
    rotate: 30,
    slideShadows: false,
  },
});

 

{
slideShadows boolean true Enables slides shadows
rotate number 50 Slide rotate in degrees
stretch number 0 Stretch space between slides (in px)
depth number 100 Depth offset in px (slides translate in Z axis)
modifier number 1 Effect multipler
}

Flip Effect

Flip Effect Parameters

Be sure to have the `effect` param set to `flip` in order for this to work.

Parameter Type Default Description
flipEffect object  

Object with Flip-effect parameters. For example:

var mySwiper = new Swiper('.swiper-container', {
  flipEffect: {
    rotate: 30,
    slideShadows: false,
  },
});

 

{
slideShadows boolean true Enables slides shadows
limitRotation boolean true Limit edge slides rotation
}

Cube Effect

Cube Effect Parameters

Be sure to have the `effect` param set to `cube` in order for this to work.

Parameter Type Default Description
cubeEffect object  

Object with Cube-effect parameters. For example:

var mySwiper = new Swiper('.swiper-container', {
  cubeEffect: {
    slideShadows: false,
  },
});

 

{
slideShadows boolean true Enables slides shadows
shadow boolean true Enables main slider shadow
shadowOffset number 20 Main shadow offset in px
shadowScale number 0.94 Main shadow scale ratio
}

2 Comments

temp

Can you show the zoom effect (also known as the Ken Burns Effect)?

Thanks!

How to change the vertical slide to fadeIn effect when clicking on the button

We are using a verticle slider and it's working file, but if we click on the button then slide change to effect fadeIn, the button is outside of the slide.