Navigation buttons not working

miller-kevin commented 4 years ago

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?

miller-kevin commented 4 years ago

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

michaellux commented 4 years ago

I have the same problem.

miller-kevin commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

miller-kevin commented 4 years ago

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?

miller-kevin commented 4 years ago

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 commented 4 years ago

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).

michaellux commented 4 years ago

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).

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

jasonloeve commented 4 years ago

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).

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

yuanxianjun commented 4 years ago

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

defcom20 commented 4 years ago

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 commented 4 years ago

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.

miller-kevin commented 4 years ago

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 commented 4 years ago

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).

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 commented 4 years ago

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 commented 4 years ago

@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.

laksmaria commented 4 years ago

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).

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 :(

miller-kevin commented 4 years ago

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).

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 commented 4 years ago

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).

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

There is simple and clean workaround without need to downgrade. Tested fine with swiper@6.0.1 and vue-awesome-swiper@4.1.0

<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 commented 4 years ago

@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 commented 3 years ago

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).

It worked for me, thanks!

matiyin commented 3 years ago

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

      <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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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)
   }
}

grahor-targ commented 3 years ago

I have managed to successfully use the solution by jalalianmohsen89 ( https://github.com/surmon-china/vue-awesome-swiper/issues/680#issuecomment-665051360 ) for my nuxt app. Adding my own plugin file, just in case, for people who aren't really experienced. I needed only Pagination and Navigation, so that's what I've added:

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

// import style
import 'swiper/swiper-bundle.min.css'

SwiperClass.use([Pagination, Navigation])
Vue.use(getAwesomeSwiper(SwiperClass))

Afterwards, the normal component works with pagination and navigation buttons.

foxconn-quality-inspector commented 3 years ago

这里也有同样的问题。此包当前与刷卡v5（即和）。滑轮 v6.0.0 和 v6.0.1 到目前为止似乎与损坏的导航不兼容（至少）。yarn add swiper@5.4.5``import "swiper/css/swiper.css"

it works very well

delueg commented 3 years ago

I got it work in my nuxt app with

// Import Swiper and modules
import SwiperCore, { Navigation, Pagination, Scrollbar } from 'swiper/core';

// Install modules
SwiperCore.use([Navigation, Pagination, Scrollbar]);

like described here

gaojianqi6 commented 3 years ago

I use it work in my vue app. Using the method of vue-awesome-swiper updateSwiper，it can destroy and rebuild swiper instance. it works well.

mounted() {
  this.$nextTick(() => {
    setTimeout(() => {
      this.$refs["***"].updateSwiper();
    }, 100);
  });
},

arishojaei commented 3 years ago

I have managed to successfully use the solution by jalalianmohsen89 ( #680 (comment) ) for my nuxt app. Adding my own plugin file, just in case, for people who aren't really experienced. I needed only Pagination and Navigation, so that's what I've added:
import Vue from 'vue'
import { Swiper as SwiperClass, Pagination, Navigation } from 'swiper/swiper.esm'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// import style
import 'swiper/swiper-bundle.min.css'

SwiperClass.use([Pagination, Navigation])
Vue.use(getAwesomeSwiper(SwiperClass))
Afterwards, the normal component works with pagination and navigation buttons.

Is it OK after build?

sandercoffee commented 3 years ago

"swiper": "^6.8.4", "vue-awesome-swiper": "^4.1.1",

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

// import style
import "swiper/swiper-bundle.min.css"

SwiperClass.use([Pagination, Navigation, Autoplay])
Vue.use(getAwesomeSwiper(SwiperClass))

const { directive } = getAwesomeSwiper(SwiperClass)
Vue.directive("swiper", directive)

swiperOption: {
  slidesPerView: 1,
  loop: true,
  spaceBetween: 10,
  autoplay: {
    delay: 2500
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
}

<div v-swiper:mySwiperRef="swiperOption" class="swiper-container">
  <div class="swiper-wrapper">
    <div v-for="(img, index) in images" :key="index" class="swiper-slide"><img :src="img.src" /></div>
  </div>

  <div tabindex="0" class="swiper-button-prev" role="button"></div>
  <div tabindex="0" class="swiper-button-next" role="button"></div>
  <div class="swiper-pagination"></div>
</div>

working fine, FINALLY!

ytliuSVN commented 2 years ago

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).

I got this problem when downgrade to "swiper": "5.4.5".

Failed to compile.

./node_modules/swiper/swiper.esm.js
Module build failed: Error: ENOENT: no such file or directory

The packages I have installed are:

"swiper": "5.4.5"
"vue": "2.6.14",
"vue-awesome-swiper": "4.1.1",

I am not sure what I am doing wrong. Could someone help? Thanks!

surmon-china / vue-awesome-swiper