Pagination is not working on Swiper6

Vue.js version and component version

vue@2.6.11
swiper@6.0.2
vue-awesome-swiper@4.1.1

※ These from yarn of version is 1.22.4

Reproduction Link

I can’t worked sample code of pagination.

This is my code:

<template>
  <div class="posts">
    <div class="post" v-for="(user, key) in userList" :key="key">
      ...
      <div class="post__image">
        <swiper :options="swiperOptions" ref="mySwiper">
          <swiper-slide v-for="(content_image, key) in user.content_images" :key="key">
            <img :src="content_image.image.url" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination" />
        </swiper>
      </div>
      ...
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";

export default Vue.extend({
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  props: {
    userList: {
      type: Array,
      required: true,
    },
  },
  data: function () {
    return {
      swiperOptions: {
        loop: false,
        slidesPerView: 1,
        centeredSlides: true,
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true,
        },
      },
    };
  },
});
</script>

What am I doing wrong? please teach me.

Issue Analytics

State:
Created 3 years ago
Reactions:32
Comments:22

Top GitHub Comments

23reactions

studio65digitalcommented, Jul 12, 2020

Yes. I have a Project running with swiper 5.3.7 where the pagination works fine. (vue-awesome-swiper version there is 4.1.0)

7reactions

baermathiascommented, Aug 1, 2021

Don’t use vue-awesome-swiper, its broken and the repo is not maintained. Use the official swiper, it supports Vue 3 officialy: https://swiperjs.com/vue But you can also use the core of it with Vue 2. Here is an example:

tamplate part:

<template>
<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide" 
      v-for="(slide, index) in slides"
      :key="index"
    >
      <!-- I am using Vuetify v-avatar and v-img here, but you don't need it -->
      <v-avatar 
        tile="tile" 
        size="15vw"
        class="mt-8"  
      >
        <v-img :src="`${baseUrl}${slide.url}`"></v-img>
      </v-avatar>
    </div>
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
</template>

script part:

<script>
// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';

// core version + navigation, pagination modules:
import SwiperCore, { Navigation, Pagination } from 'swiper/core';

// configure Swiper to use modules
SwiperCore.use([Navigation, Pagination]);

export default {
  name: "Carousel",
  props: ['slides'],
  data(){
    return {
      baseUrl: process.env.VUE_APP_API_BASE_URL,
    }
  },

  mounted() {

    // init Swiper:
    /* eslint-disable no-unused-vars */
    const swiper = new Swiper('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: false,

      slidesPerView: 3,
      spaceBetween: 50,

      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
        type: "bullets",
        clickable: true
      },

      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
  }

};
</script>

<style>
.swiper-container {
  width: 600px;
  height: 300px;
}
</style>