VueAwesomeSwiper

cdn example

by Dariusz Gardyński

HTML

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Swiper JS Vue -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-awesome-swiper.js"></script>

<div id="vueapp">
  <p>{{message}}</p>
  <button @click="changeData">
    Change data
  </button>
  <button @click="fixLoop">
    destroy & create loop
  </button>
  <swiper ref="awesomeSwiperA" :options="swiperOptionA">
    <!-- slides -->
    <swiper-slide v-for="slide in test" :key="slide" v-if="test.length>0">I'm Slide {{slide}}</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
  <br>
</div>

CSS

.swiper-container {
  height: 300px;
  width: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  background-color: #eee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

JavaScript

Vue.use(VueAwesomeSwiper)
new Vue({
  el: '#vueapp',
  components: {
    LocalSwiper: VueAwesomeSwiper.swiper,
    LocalSlide: VueAwesomeSwiper.swiperSlide,
  },
  data: {
    test: [1, 2, 3, 4],
    message: 'Hi from Vue',
    swiperOptionA: {
      slidesPerView: 4,
      spaceBetween: 20,
      loop: true,
      centeredSlides: true,
      pagination: {
        el: '.swiper-pagination'
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    },
    swiperOptionB: {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true
      }
    }
  },
  methods: {
    fixLoop() {
      this.$refs.awesomeSwiperA.swiper.loopDestroy();
      this.$refs.awesomeSwiperA.swiper.loopCreate();
    },
    changeData() {
      if (this.test[0] === 1) {
        this.test = ["a", "b", "f", "m"];
      } else {
        this.test = [1, 2, 3, 4];
      }
      this.$refs.awesomeSwiperA.swiper.update();
    }
  },
  computed: {
    swiperA() {
      return this.$refs.awesomeSwiperA.swiper
    },
  },
  mounted() {
    console.log('this is swiper A instance object', this.swiperA, 'B instance', this.swiperB)
  }
})