Как init Swiper в VueJS?

07.05.2019 01:54:28 Просмотров 307 Источник

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

Я пробовал также Vue awesome swiper, но я предпочитаю использовать официальную версию без ошибок. Я попытался init 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 строки... Спасибо за вашу помощь.

Ответы - Как init Swiper в VueJS? / How init Swiper in VueJS?

Eunseok

06.08.2019 04:49:07

mounted : function(){
        var swiper = new Swiper('.swiper-container', {
                      slidesPerView: 7,
                      spaceBetween: 0,
                      slidesPerGroup: 7
                    });

},

Источник

Adi Azarya

20.10.2019 03:32:17

У меня была такая же проблема давным-давно. Наконец, я добавил Swiper из cdn, он хорошо работал для меня. Я сделал простой пример для вас (с Swiper) надеюсь, что это поможет вам.

Я взял все CSS props + swiper config отсюда, так что не стесняйтесь играть с ним. Дайте мне знать, если у вас есть какие-либо вопросы :) Вы также можете проверить эти документы , у него есть объяснение о том, как настроить его с помощью Vue & React и т. д.

new Vue({
  el: '#app',
  data: {
    swiper: null
  },
  mounted() {
    this.swiper = new window.Swiper('.swiper-container', {
      cssMode: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination'
      },
      mousewheel: true,
      keyboard: true,
    })
  }
})

html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      height: 200px !important;
      background: pink;
      border: 1px solid #888;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
     <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</div>

Источник

Помочь в развитии проекта:

Как init Swiper в VueJS?

Ответы - Как init Swiper в VueJS? / How init Swiper in VueJS?

Другие вопросы

Ответы на ваши вопросы