web-dev-qa-db-ja.com

Vuejsのinit Swiperはどのようにしていかがですか？

まず第一に、私がこの問題について午前中に過ごしたのであなたの時間をありがとう。 vue.js上の https://idangero.us/swiper モジュールを使う方法確かにスワイパーはページ上にありますが、パラメータはカウントでは取られていないようです。

私はまたvue Awesome Swiperですが、私はバグなしで公式バージョンを使用しています。インポート直後のconstにもinit swiperを試みました。

<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行がありません。

vue.jsswiper
8
Brugher

これを使うことができます VUE Awesome Swiper 必要なものすべてがあります

次のコマンドを使用してインストールできます

npm install swiper vue-awesome-swiper --save
 _

免責事項：私はこのパッケージの所属も貢献者も持っていません、私は単にそれを使うだけです。だから私はそれをお勧めします

4
Roduan

単に使用することができます ref スライダはスライダのようにスライダを阻止します。

<template>
  <div>
    <div ref="mySlider" class="swiper-container">
     …
    </div>
    <button @click="next">Next Slide</div>
  </div>
</template>
 _
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'

export default {
  data () {
    return {
      slider: null,
      mySliderOptions: {
        loop: true
      }
    }
   },
   methods: {
     next() {
      this.slider.slideNext()
    }
  }
  mounted () {
    this.slider = new Swiper(this.$refs.mySlider, this.mySliderOptions)
  }
}
 _

アップデート

彼らはただ解放されたばかりです official vue.jsスワイパーコンポーネント （vue.jsのみ）

2
Bitpunk

これはうまくいくように見えます、それが良い方法であるかどうかわからない

親

<Swiper
  :options="carouselOptions"
/>
 _

子（swiper.vue）

  <div v-if="options" ref="swiper" class="carousel-hero carousel-hero--is-hidden swiper-container">...

<script>
    import Swiper, { Navigation, Pagination } from 'swiper';
    Swiper.use([Navigation, Pagination]);
    import 'swiper/swiper-bundle.css';
    
    export default {
      name: 'Swiper',
      props: {
        options: {
          type: Object,
          default: () => {
            return {
              slidesPerView: 1
            }
          }
        }
      },
      data() {
        return {
          swiper: null,
        }
      },
      mounted() {
        let vm = this;
    
        if (this.options && vm.$refs.swiper !== 'undefined') {    
          vm.$refs.swiper.classList.remove('carousel-hero--is-hidden');
    
          this.swiper = new Swiper(vm.$refs.swiper, {    
            slidesPerView: this.options.slidesPerView,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
    
            on: {
              init: function () {
                console.log('swiper initialized');
              },
              resize: function () {
                console.log('resize');
              }
            }
          });
        }
      },
      methods: {
    
      }
    };
    </script>
 _
0
Arlan T