Breaking News: Grepper is joining You.com. Read the official announcement!

how to config vue awesome swiper in nuxt

Vansao Hang answered on December 19, 2022 Popularity 5/10 Helpfulness 2/10

answer how to config vue awesome swiper in nuxt

related how to config vue awesome swiper in nuxt

how to config vue awesome swiper in nuxt

Comment

<template>
  <div v-swiper="swiperOption" class="w-5/6 ml-auto relative" :loadtheme="false">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">
        <!-- Render original HTML in server, render Swiper in browser (client) -->
        <img class="h-64 w-64" :src="banner" />

      </div>
    </div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </div>
</template>

<script>
import { directive } from "vue-awesome-swiper";

export default {
  name: "Slider",
  directives: {
    swiper: directive,
  },
  data() {
    return {
      banners: ["/slider-1.png", "/slider-2.png", "/slider-3.png"],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: -10,
        slidesPerGroup: 3,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            1024: {
              slidesPerView: 4,
              spaceBetween: 10
            },
            768: {
              slidesPerView: 3,
              spaceBetween: 10
            },
            640: {
              slidesPerView: 2,
              spaceBetween: 10
            },
            320: {
              slidesPerView: 1,
              spaceBetween: 10
            }
          }
      },
    };
  },
};
</script>

<style scoped>
.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  @apply w-48 h-48 ;
}
</style>

Popularity 5/10 Helpfulness 2/10 Language whatever

Source: dev.to

Tags: config whatever

Link to this answer
Share Copy Link

Contributed on Dec 19 2022

Vansao Hang

0 Answers Avg Quality 2/10

Closely Related Answers

how to config vue awesome swiper in nuxt

Comment

yarn add swiper vue-awesome-swiper

Popularity 5/10 Helpfulness 3/10 Language whatever

Source: dev.to

Tags: whatever config

Link to this answer
Share Copy Link

Contributed on Dec 19 2022

Vansao Hang

0 Answers Avg Quality 2/10

how to config vue awesome swiper in nuxt

Contents

More Related Answers

how to config vue awesome swiper in nuxt

Closely Related Answers

how to config vue awesome swiper in nuxt

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.