Vue-awesome-swiper: Navigation buttons not working

[whoisme555]

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?

[whoisme555]

If relevant, this is happening in a bootstrap-vue modal

[michaellux]

I have the same problem.

[whoisme555]

I have the same problem.

Does your pagination fail to show up as well? I just figured I'd skip the buttons and go with pagination, but the swiper-pagination-bullets class that gets added to the example pages automatically do not get added to my pagination at all. Somethings bugging out and I have no idea what it could be

[michaellux]

Does your pagination fail to show up as well? I just figured I'd skip the buttons and go with pagination, but the swiper-pagination-bullets class that gets added to the example pages automatically do not get added to my pagination at all. Somethings bugging out and I have no idea what it could be

I don't use pagination. So I can't say anything about it.

Before I installed the 'vue-awesome-swiper', I used a clean 'swiper' and navigation worked in it.

[kwalkerm]

I am having the same issue. Downgraded to an earlier version and navigation worked again.

[whoisme555]

I am having the same issue. Downgraded to an earlier version and navigation worked again.

I'll give it a shot, which version did you downgrade to?

[whoisme555]

I am having the same issue. Downgraded to an earlier version and navigation worked again.

You're a damn superhero. Went to 3.1.3 and it works once I sorted out all the differences in versions from my codebase

[sergey-seleznev]

Same problem here. This package currently works fine with Swiper v5 (i.e. yarn add [email protected] 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).

[michaellux]

Same problem here. This package currently works fine with Swiper v5 (i.e. yarn add [email protected] 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).

Thank you. I took advantage of your recommendation. It all worked out.

[jasonloeve]

Same problem here. This package currently works fine with Swiper v5 (i.e. yarn add [email protected] 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).

Thanks, this worked for me, was having issues with pagination , navigation and importing style sheets as detailed in installation instructions.

[yuanxianjun]

我现在使用也存在问题 还没有解决

[defcom20]

Yo utilizo "swiper": "^5.4.2", y "vue-awesome-swiper": "^4.1.1".

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

intenta eliminar tu node_modules swiper y vuelve correo npm install.

[MichaelMansourati]

I'm having the same issue since using vue-awesome-swiper for the second time in a more recent project with an updated version. If you don't want to downgrade, I found a workaround. You can implement navigation through a ref on the swiper:

If you have the swiper component with a ref like so:
<Swiper ref="mySwiperRef"></Swiper>

you can access the slide event like so from a method:
this.$refs.mySwiperRef.$swiper.slideNext()
or
this.$refs.mySwiperRef.$swiper.slidePrev()

hope this helps.

[whoisme555]

I'm having the same issue since using vue-awesome-swiper for the second time in a more recent project with an updated version. If you don't want to downgrade, I found a workaround. You can implement navigation through a ref on the swiper:

If you have the swiper component with a ref like so:
<Swiper ref="mySwiperRef"></Swiper>

you can access the slide event like so from a method:
this.$refs.mySwiperRef.$swiper.slideNext()
or
this.$refs.mySwiperRef.$swiper.slidePrev()

hope this helps.

Yeah, that's a viable fix for the navigation, but the modern version also has broken pagination. I'm not familiar with a work around for that, so I still had to downgrade

[drinkmorewaters]

Same problem here. This package currently works fine with Swiper v5 (i.e. yarn add [email protected] 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).

You are an absolute legend, fixed every single issue i was having in Nuxt. Cannot thank you enough. Removed swiper 6, changed to this version and everything just started working again, pagination, buttons, the lot.

[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'

[AndrewBogdanovTSS]

@jalalianmohsen89 awesome! Thanks for the working workaround! For those who are using swiper as a directive, here is a bit modified workaround:

<!-- You can find this swiper instance object in current component by the "mySwiper"  -->
      <div v-swiper:mySwiper="swiperOptions">

  import 'swiper/swiper-bundle.min.css'
  import LazyHydrate from 'vue-lazy-hydration'
  import {Swiper as SwiperClass, Pagination, Navigation} from 'swiper/swiper.esm.js'
  import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

  // Swiper modules
  SwiperClass.use([Pagination, Navigation])

  // local component
  const {directive} = getAwesomeSwiper(SwiperClass)

export default {
    directives: {
      swiper: directive
    },
// Your specific code will go here
}

Btw, such an approach also has a benefit of smaller resulting bundle size since it allows you to include only modules you actually use. I wish we could do the same incremental import of CSS together with the imported module.

[smartlaksh]

Same problem here. This package currently works fine with Swiper v5 (i.e. yarn add [email protected] 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).

Swiper 5x doesn't render in ie11 and throw some syntax errors 🤯 It's either navigation works or ie depends on the version of swiper we're using :(

[whoisme555]

Same problem here. This package currently works fine with Swiper v5 (i.e. yarn add [email protected] 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).

Swiper 5x doesn't render in ie11 and throw some syntax errors 🤯 It's either navigation works or ie depends on the version of swiper we're using :(

Are you using Babel at all? There's a fix that involves excluding dom7 and swiper from transpilation

[carlos-ribeiro-cedro]

Same problem here. This package currently works fine with Swiper v5 (i.e. yarn add [email protected] 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).

It's better to downgrade, since this lib is outdated with swiper v6.x

I'm having the same issue since using vue-awesome-swiper for the second time in a more recent project with an updated version. If you don't want to downgrade, I found a workaround. You can implement navigation through a ref on the swiper:

If you have the swiper component with a ref like so:
<Swiper ref="mySwiperRef"></Swiper>

you can access the slide event like so from a method:
this.$refs.mySwiperRef.$swiper.slideNext()
or
this.$refs.mySwiperRef.$swiper.slidePrev()

hope this helps.

Using the workaround above will cause some issues, like the buttons not properly hiding when the centeredSlides property is set to true.

[AndrewBogdanovTSS]

@carlos-ribeiro-cedro why to downgrade if you can set it up like so? https://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-666364812

[carlos-ribeiro-cedro]

@AndrewBogdanovTSS well, I guess the API documentation itself is also outdated, because if you look right to the usage of Navigation here, for example, there's no import of { Navigation } from swiper/swiper.esm.js and this example does not work. Then you have to search for it on the dependent library swiper, what for me is a bit messy. Not mentioning there's no way to use it anymore as a component, only as a directive but then you have to rebuild your entire html.

[AndrewBogdanovTSS]

Well, life isn't perfect, I agree. But I would use newest swiper features rather than to roll back to outdated version which is more than 2 years old

[lucien144]

There is simple and clean workaround without need to downgrade. Tested fine with [email protected] and [email protected]

<swiper ref="swiper" :options="swiperOptions">
    <div class="swiper-button-prev" slot="button-prev" @click="prev()"></div>
    <div class="swiper-button-next" slot="button-next" @click="next()"></div>
    <!-- ... -->
</swiper>

<script lang="ts">
import Vue from 'vue';

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

export default Vue.extend({
    components: { Swiper, SwiperSlide },
    directives: {
        swiper: directive
    },
    data: () => ({
        swiperOptions: {
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        }
    }),
    methods: {
        prev() {
            this.$refs.swiper.$swiper.slidePrev();
        },
        next() {
            this.$refs.swiper.$swiper.slideNext();
        }
    }
});
</script>

[AndrewBogdanovTSS]

@lucien144 no, it's not a good solution and it was mentioned here before https://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-657823733

[mathvalenza]

Same problem here. This package currently works fine with Swiper v5 (i.e. yarn add [email protected] 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).

It worked for me, thanks!

[matiyin]

@jalalianmohsen89 awesome! Thanks for the working workaround! For those who are using swiper as a directive, here is a bit modified workaround:

<!-- You can find this swiper instance object in current component by the "mySwiper"  -->
      <div v-swiper:mySwiper="swiperOptions">

  import 'swiper/swiper-bundle.min.css'
  import LazyHydrate from 'vue-lazy-hydration'
  import {Swiper as SwiperClass, Pagination, Navigation} from 'swiper/swiper.esm.js'
  import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

  // Swiper modules
  SwiperClass.use([Pagination, Navigation])

  // local component
  const {directive} = getAwesomeSwiper(SwiperClass)

export default {
    directives: {
      swiper: directive
    },
// Your specific code will go here
}

Btw, such an approach also has a benefit of smaller resulting bundle size since it allows you to include only modules you actually use. I wish we could do the same incremental import of CSS together with the imported module.

Perfect solution for now, saved my code not compiling swiper to ES5. I didn't use LazyHydrate and moved my css import to main.js, which works better in my case. I'm using Gridsome, but it's unrelated to this issue.

Much appreciated!

[Mixermachine]

Does anybody have a workaround for React?
I'm having the same problem there

The Swiper 5.4.5 version also still has the Windows NPM bug https://github.com/nolimits4web/swiper/issues/3985
Greetings from Munich

[vltansky]

@Mixermachine we already resolved this issue for 6.x.x, I created an issue as a reminded to release a fix to 5.x.x https://github.com/nolimits4web/swiper/issues/4081
But it will happen after 11.01.21

[Mixermachine]

@vltansky Thanks for your reply, but you reference just the 3985 bug right?
My initial problem is the same as this thread describes but for React (ionic to be specific).

The Navigation buttons do not work for me.
I switched away from swiper because it was really not working for me.

[vltansky]

@Mixermachine
Yes, I referenced to 3985 only bug.
Did you try the official Swiper component for Vue?
https://swiperjs.com/vue/

https://swiperjs.com/react/ for React*

[Mixermachine]

@vltansky I used the normal package from https://swiperjs.com/react/ :)
My issue with React Swiper was just very simular to this issue here, so I commented.
Swiper also seems to go crazy on me when I resize the window (with every resize the card gets smaller).
I placed Swiper in a grid with a size of 6, maybe that was the problem?

Anyway I needed to put this feature to rest and continue with some other things.
Will come up in the future :)

[Loukili-Rachid]

This is work fine with me button navigation with autoplay , loop ..

version :
"swiper": "^5.4.0",
"vue-awesome-swiper": "^4.1.1"

<template>
  <swiper :options="swiperOption">
    <swiper-slide v-for="(item, index) in items" :key="index">
      <img :src="'/storage/' + item.img" />
    </swiper-slide>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";

import "swiper/css/swiper.min.css";

export default {
  props: ["items"],
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 20,
        autoplay: {
          delay: 1000,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        loop: true,
        breakpoints: {
          1024: {
            slidesPerView: 5,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 15,
          },
          640: {
            slidesPerView: 2,
            spaceBetween: 10,
          },
          320: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
@import "swiper/swiper.scss";
img {
  height: 150px;
  width: 100%;
  border-radius: 3px;
}
.swiper-slide {
  padding-right: 3px;
}
.swiper-button-next,
.swiper-button-prev {
  --swiper-navigation-color: #ccc;
  --swiper-navigation-size: 30px;
  &:hover {
    --swiper-navigation-color: #666;
  }
}
</style>

[AndrewBogdanovTSS]

I logged related issue in core swiper.js repo: https://github.com/nolimits4web/swiper/issues/4052
Until that would be resolved, one workaround I found helping is updating navigation after swiper was initialized, like this:

mounted() {
   this.$nextTick(() => {
      // Make sure you are doing it in next tick, otherwise it won't work
      setTimeout(() => this.slider.navigation.update(), 0)
   }
}