Navigation buttons not working

Vue.js version and component version

Latest from NPM (4.1.1)

Reproduction Link

I can’t reproduce it when starting with the suggested fiddle link, which means it’s clearly on my end, but I could use some help

This is my configuration:

<template>
<swiper class="swiper" ref="slideSwiper" 
                        :options="swiperOptions"
                        :auto-destroy="true"
                        :delete-instance-on-destroy="true"
                        :cleanup-styles-on-destroy="true">
                    <swiper-slide class="carousel-slide" v-for="(slide, i) in sliderSlides"
                                  :key="'slide ' + i">
                        <img :src="$utils.getThumbnailUrl('xs', slide, false, true)" />
                    </swiper-slide>
                    <div class="swiper-button-next" slot="button-next"></div>
                    <div class="swiper-button-prev" slot="button-prev"></div>
</swiper>
</template>

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

export default {
    components: {
        Swiper,
        SwiperSlide
    },

    data() {
        return {
            swiperOptions: {
                    //loop: true,
                    //loopedSlides: 5, // looped slides should be the same
                    spaceBetween: 30,
                    centeredSlides: true,
                    slidesOffsetBefore: '100px',
                    slidesOffsetAfter: '100px',
                    slidesPerView: 'auto',
                    touchRatio: 0.2,
                    slideToClickedSlide: true,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                }
        }
    }
}

The next/previous buttons show up properly, but have no click event bound to them for some reason. What am I doing wrong?

[sergey-seleznev]

Same problem here. This package currently works fine with Swiper v5 (i.e. yarn add swiper@5.4.5 and import "swiper/css/swiper.css"). Swiper v6.0.0 and v6.0.1 seems to be not compatible so far with the broken navigation (at least).

[jalalianmohsen89]

I solved the problem this way Define swiper globally with this code

import Vue from ‘vue’ import {Swiper as SwiperClass, Pagination, Navigation, Mousewheel, Autoplay} from ‘swiper/swiper.esm’ import getAwesomeSwiper from ‘vue-awesome-swiper/dist/exporter’

SwiperClass.use([Pagination, Mousewheel, Navigation, Autoplay]) Vue.use(getAwesomeSwiper(SwiperClass)) const {Swiper, SwiperSlide} = getAwesomeSwiper(SwiperClass)

// import style import ‘swiper/swiper-bundle.min.css’