Question 299340 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Enable navigation buttons and pagination in Swiperjs – vuejs

I made a slider with a swiper.js in vuejs

everything works fine but the navigation buttons and pagination don’t work

I set the :navigation="true" and :pagination="{clickable:true, dynamicBullets:true}" but they still don’t work

where is the problem?

What else should I do?

<template>
        <Swiper 
                class="rounded-xl text-xs w-[95%]"    
                :modules="[ SwiperEffectCreative]"    
                :slides-per-view="2"      
                :space-between="20"
                :navigation="true"
                :pagination="{clickable:true, dynamicBullets:true}"
                :autoplay="{delay: 3000,disableOnInteraction: true,}" >


          <SwiperSlide v-for="(product, index) in data" :key='index' class="py-6">
            <ProductCard :data="product"/>
          </SwiperSlide>

        </Swiper>
</template>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I finally managed to fix it

    I should have added the SwiperNavigation in the modules.

    :modules="[ SwiperEffectCreative, SwiperNavigation]"

  2. 0

    I am not an expert on SwiperJS, but according to their docs it seems Navigation and Pagination are modules. This means they need to be both imported into your component logic and included in the "modules" prop. It’s also good practice in Vue to bind your props in the setup function for better code readability. Finally, EffectCreative is the correct name of that module (without "Swiper").

    <template>
  <Swiper
    class="rounded-xl text-xs w-[95%]"
    :modules="[EffectCreative, Navigation, Pagination]"
    :slides-per-view="2"
    :space-between="20"
    :navigation="true"
    :pagination="{ clickable: true, dynamicBullets: true }"
    :autoplay="{ delay: 3000, disableOnInteraction: true }"
  >
    <SwiperSlide v-for="(product, index) in data" :key="index" class="py-6">
      <ProductCard :data="product" />
    </SwiperSlide>
  </Swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import { EffectCreative, Navigation, Pagination } from "swiper";
</script>

    Or to bind props in your setup method:

    <Swiper
  :modules="modules"
  :pagination="pagination"
  ...
>

<script>
import {...};

setup(){
 return {
  const modules = [ EffectCreative, Navigation, Pagination ];
  const pagination = { clickable: true, dynamicBullets: true };
 }
}
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search