Unlock Vue-Awesome-Swiper: Essential Settings for 3D Carousel Effects

This note records how to use the vue-awesome-swiper carousel component in Vue projects, especially for small advertisement pages.

vue-awesome-swiper is a Vue wrapper for Swiper 4. Documentation: https://www.swiper.com.cn/api/index.html

Before version 2.6.7 the wrapper was based on Swiper 3, so many settings differ.

First pitfall: versions after 2.6.7 require you to import the CSS file swiper/dist/css/swiper.css manually.

Global import example:

Component import example:

Usage follows normal component usage:

Key configuration parameters

slidesPerView

Sets the number of slides visible in the container at the same time.

centeredSlides

When true, the active slide is centered instead of left‑aligned.

effect

Can be slide (default), fade, cube, coverflow, or flip.

fade: fadeEffect: { crossFade: false } cube:

flip:

For the flash‑sale page we use the coverflow effect, which relies on the following parameters:

rotate : Y‑axis rotation angle during 3D rotation (default 50).

stretch : Distance between slides; larger values make slides tighter (default 0).

depth : Z‑axis depth; larger values push slides farther away, making them appear smaller (default 100).

modifier : Multiplier for rotate, stretch, and depth (default 1).

slideShadows : Enable slide shadows (default true).

The flash‑sale page also needs side slides to be more transparent than the center slide and to fade during transition. This is achieved with the progress callback.

progress(progress)

Called whenever Swiper’s progress changes; receives a value between 0 and 1.

In Swiper 3 the callback was onProgress(swiper, progress). In Swiper 4+ it is defined inside on:{} and this refers to the Swiper instance.

Using progress you can compute each slide’s opacity.

Typical usage in a Vue computed property:

After dynamically loading data you can refresh the carousel with swiper.update() and programmatically move to a slide with swiper.slideTo(index, 10, false).

That’s the current set of notes; feel free to share further experiences when using this component.