Navigation buttons not working in surmon-china vue-awesome-swiper

Explanation of the problem

The next/previous buttons are not responsive to clicks on the Swiper component in a Vue.js application.

Environment: The Vue.js version used is the latest version (4.1.1) obtained from NPM. The component version being used is also the latest version obtained from NPM.

Code Configuration: The following code block shows the implementation of the Swiper component in the template section of the component.

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

The following code block shows the import and components section of the component.

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

export default {
    components: {
        Swiper,
        SwiperSlide
    },

The following code block shows the data section of the component where the swiperOptions object is defined.

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

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Navigation buttons not working in surmon-china vue-awesome-swiper

The issue at hand is related to compatibility between Swiper v5 and the latest versions v6.0.0 and v6.0.1. The navigation is not working properly with these versions. This issue is most likely due to changes made in the latest Swiper versions that are not compatible with the current implementation.

One solution proposed is to use Swiper v5 instead. To do this, the user can add Swiper v5 through yarn with the following command:

yarn add swiper@5.4.5

and then import the CSS with the following code:

import "swiper/css/swiper.css"

This solution takes advantage of the compatibility of Swiper v5 with the current implementation, avoiding the navigation issues present in the latest versions.

Another solution involves defining Swiper globally using the code provided. This solution uses the following code to import Vue and the Swiper components, as well as the vue-awesome-swiper package and the Swiper CSS:

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 ‘swiper/swiper-bundle.min.css’

Other popular problems with vue-awesome-swiper

Problem: slideTo method not working in Vue-Awesome-Swiper

The slideTo method is used to navigate to a specific slide by its index. It is a common problem that the slideTo method does not work in Vue-Awesome-Swiper. This is because the slideTo method is not triggered correctly when used within a Vue component.

Solution:

The solution to this problem is to trigger the slideTo method inside a nextTick callback. The nextTick callback is a Vue method that allows you to run a function after the current render cycle has completed.

methods: {
  goToSlide(index) {
    this.$nextTick(() => {
      this.$refs.mySwiper.swiper.slideTo(index)
    })
  }
}

Problem: Updating swiper dynamically with new slides in Vue-Awesome-Swiper

Vue-Awesome-Swiper does not dynamically update the swiper when new slides are added to the component. This can cause issues when using the swiper to display dynamic data, such as data from an API.

Solution:

The solution to this problem is to use the swiper.update() method to update the swiper after the new slides have been added. The update method updates the swiper to reflect any changes made to the slides.

methods: {
  addSlides() {
    // Add new slides
    this.slides.push({
      title: 'Slide 4',
      description: 'Description for slide 4',
      image: 'https://picsum.photos/300/200?image=4'
    }, {
      title: 'Slide 5',
      description: 'Description for slide 5',
      image: 'https://picsum.photos/300/200?image=5'
    })
    this.$nextTick(() => {
      this.$refs.mySwiper.swiper.update()
    })
  }
}

Problem: Preventing navigation while swiping in Vue-Awesome-Swiper

Vue-Awesome-Swiper does not have a built-in method for preventing navigation while the user is swiping. This can cause issues when you want to prevent navigation while the user is still in the middle of a swipe.

Solution:

The solution to this problem is to use the allowTouchMove property. The allowTouchMove property can be set to false to prevent navigation while swiping.

<swiper :options="swiperOptions">
  <swiper-slide v-for="(slide, index) in slides" :key="index">
    <div v-if="allowSwipe" @touchstart="allowSwipe = false" @touchend="allowSwipe = true">
      {{ slide.title }}
    </div>
  </swiper-slide>
</swiper>

data() {
  return {
    allowSwipe: true,
    swiperOptions: {
      allowTouchMove: this.allowSwipe
    }
  }
}

A brief introduction to vue-awesome-swiper

Vue-Awesome-Swiper is a popular and feature-rich swipe component for Vue.js, a progressive JavaScript framework for building user interfaces. It is based on the popular Swiper library, a library for creating touch-enabled sliders and carousels. Vue-Awesome-Swiper provides a simple and intuitive interface for integrating swipers into Vue.js applications, making it a great choice for developers looking to add swipe functionality to their projects.

Vue-Awesome-Swiper offers a wide range of customization options, allowing developers to fine-tune the behavior and appearance of the swiper to their specific needs. This includes options for controlling the navigation, pagination, scrollbar, and mouse wheel behavior, as well as options for setting the autoplay, loop, speed, and effect of the swiper. Additionally, Vue-Awesome-Swiper provides access to a number of APIs and events, allowing developers to programmatically control the swiper and respond to user interactions. This makes it a highly flexible and powerful solution for adding swipe functionality to Vue.js applications.

Most popular use cases for vue-awesome-swiper

1. Building Touch-Enabled Sliders and Carousels

Vue-Awesome-Swiper can be used to build touch-enabled sliders and carousels in Vue.js applications. With its intuitive and feature-rich API, it provides an easy way to add swipe functionality to images, videos, or any other type of content. With a few lines of code, developers can create touch-enabled sliders and carousels that are optimized for both desktop and mobile devices.

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(slide, index) in slides" :key="index">
      <img :src="slide.image" />
      <h3>{{ slide.title }}</h3>
      <p>{{ slide.description }}</p>
    </swiper-slide>
  </swiper>
</template>

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

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      slides: [
        {
          title: 'Slide 1',
          description: 'Description for slide 1',
          image: 'https://picsum.photos/300/200?image=1'
        },
        {
          title: 'Slide 2',
          description: 'Description for slide 2',
          image: 'https://picsum.photos/300/200?image=2'
        },
        {
          title: 'Slide 3',
          description: 'Description for slide 3',
          image: 'https://picsum.photos/300/200?image=3'
        }
      ],
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

2. Enhancing User Experience

Vue-Awesome-Swiper can be used to enhance the user experience in Vue.js applications. With its support for touch gestures and smooth animations, it can help to create a more engaging and interactive experience for users. Additionally, its support for autoplay, loop, speed, and effect options can make it easier to build rich and dynamic content presentations.

3. Creating Interactive Content

Vue-Awesome-Swiper can be used to create interactive content in Vue.js applications. With its APIs and events, developers can programmatically control the swiper and respond to user interactions. This makes it a powerful solution for building interactive content, such as quizzes, surveys, or any other type of dynamic content.