Как инициировать Swiper в VueJS? - PullRequest
Новая
       19

Как инициировать Swiper в VueJS?

0 голосов
/ 07 мая 2019

прежде всего спасибо за ваше время, потому что я потратил все утро на эту проблему.Как использовать модуль https://idangero.us/swiper на vue.JS?Действительно, Swiper есть на странице, но параметры, похоже, не учитываются.

Я попробовал также vue awesome swiper, но я предпочитаю использовать официальную версию без ошибок.Я попытался инициализировать swiper также в const сразу после импорта. 

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <v-touch
         @tap="navigateTo(item)"
         v-for="item in subList"
         :key="item._id"
         class="swiper-slide"
      >
        {{t(item.sentence)}}
      </v-touch>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.css'
  import 'swiper/dist/js/swiper.js'
  export default {
    name: 'category',
    data () {
      return {
        subList: [{some data}],
      }
    },
    mounted () {
      this.initSwiper()
    },
    methods: {
      initSwiper () {
        const mySwiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          slidesPerColumn: 2,
          spaceBetween: 50
        })
        mySwiper.init()
      }
    }
  }
</script>

<style scoped>
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 2px white;
  width: 200px;
  height: 200px;
}
</style>

Например, с этим кодом мне нужно иметь пробел между каждым div или только 2 строки, но у меня нет пробела и 3 строки... Спасибо за вашу помощь.

...