Can't enable fade effect

[tilight]

Hey Guys, i am not able to enable fade. If i enable fade, it doesnt change the effect. Could you please help me? My code looks like this:

        <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide>
                <video
                    class="swiper-lazy"
                    muted
                    autoplay
                    loop
                    playsinline="true"
                    src="https://vod-progressive.akamaized.net/exp=1594806534~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F535%2F16%2F402679728%2F1721261835.mp4~hmac=7720a9a2436a0a704003ff4555804bca11b89139a63e5ca50c61b36dfbaa9552/vimeo-prod-skyfire-std-us/01/535/16/402679728/1721261835.mp4?filename=Mountain+-+34608.mp4"
                ></video>
            </swiper-slide>
            <swiper-slide>
                <video
                    class="swiper-lazy"
                    muted
                    autoplay
                    loop
                    playsinline="true"
                    src="https://vod-progressive.akamaized.net/exp=1594806576~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2535%2F15%2F387675159%2F1635261604.mp4~hmac=bdc7bfbecbe9b95f3d7b4535f1b08431a813ecb80747e0a27b1bce4a5922e814/vimeo-prod-skyfire-std-us/01/2535/15/387675159/1635261604.mp4?filename=Upper+Palatinate+-+31556.mp4"
                ></video>
            </swiper-slide>
            <swiper-slide>
                <video
                    class="swiper-lazy"
                    muted
                    autoplay
                    loop
                    playsinline="true"
                    src="https://vod-progressive.akamaized.net/exp=1594806593~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F4207%2F15%2F396036988%2F1684003587.mp4~hmac=8cff324df5546bfd2c694bf53635f7ef788d8a62b83a834345e968f32677ce7f/vimeo-prod-skyfire-std-us/01/4207/15/396036988/1684003587.mp4?filename=Sea+-+33194.mp4"
                ></video>
            </swiper-slide>
            <swiper-slide>
                <video
                    class="swiper-lazy"
                    muted
                    autoplay
                    loop
                    playsinline="true"
                    src="https://vod-progressive.akamaized.net/exp=1594806613~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F1904%2F15%2F384523301%2F1616846605.mp4~hmac=9f30a8351baba91909e6c17266fa86de1b92767bef6ccd213a853d04c8ea2091/vimeo-prod-skyfire-std-us/01/1904/15/384523301/1616846605.mp4?filename=Mountains+-+31175.mp4"
                ></video>
            </swiper-slide>
            <swiper-slide>
                <video
                    class="swiper-lazy"
                    muted
                    autoplay
                    loop
                    playsinline="true"
                    src="https://vod-progressive.akamaized.net/exp=1594806626~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F1798%2F15%2F383991325%2F1613929065.mp4~hmac=9f618665a1cdddefa96baa6b405a1b21f6281e2558476c4bee9e899679e630df/vimeo-prod-skyfire-std-us/01/1798/15/383991325/1613929065.mp4?filename=Hang+-+30902.mp4"
                ></video>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
export default {
    name: "Home",
    components: {
        buildContents: () =>
            import("@/cross-site/components/content/build-contents.vue"),
        Swiper,
        SwiperSlide
    },
    directives: {
        swiper: directive
    },
    data() {
        return {
            swiperOptions: {
                pagination: {
                    el: ".swiper-pagination"
                },
                loop: true,
                slidesPerView: 1,
                fadeEffect: { crossFade: true },
                effect: "fade"
                // fadeEffect: {
                //  crossFade: true
                // }
            }
        };
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper;
        }
    },
    mounted() {
        console.log("Current Swiper instance object", this.$refs);
        console.log("Current Swiper instance object", this.swiper);
        // this.swiper.slideTo(3, 1000, false);
    }
};
</script>

[paullacour]

Same issue here. Did you find a solution?

[tilight]

Same issue here. Did you find a solution?

No i don't

[kikky7]

Looks like latest version is broken completely - fade effect doesn't work, autoplay, navigation, ... Only works speed from those params. In latest version it shows navigation arrows, but they don't work.

EDIT: By latest version, I mean swiper.js version, not vue-awesome-swiper.

effect: "fade",
fadeEffect: { crossFade: true },
speed: 1500,
slidesPerView: 1,
autoplay: { delay: 5000 },
navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
},

[liaohan918]

Switch to the lower version, version 6.0 can't use fade

[homerjam]

import { Swiper, EffectFade } from 'swiper';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css';

Swiper.use([EffectFade]);
Vue.use(VueAwesomeSwiper);