VueAwesomeSwiper

cdn example

by Stas Orekhovskiy

HTML

<!-- Include stylesheet -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">
<!-- Include the Swiper library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/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>
    <swiper ref="awesomeSwiperA" :options="swiperOptionA" @set-translate="onSetTranslate">
      <!-- slides -->
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</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>
    <local-swiper ref="awesomeSwiperB" :options="swiperOptionB">
        <local-slide v-for="i in 3">I'm Slide {{ i }}</local-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
    </local-swiper>
</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: {
     message: 'Hi from Vue',
     swiperOptionA: {
     		pagination: {
          el: '.swiper-pagination'
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
     },
     swiperOptionB: {
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        }
     }
	 },
   computed: {
      swiperA() {
        return this.$refs.awesomeSwiperA.swiper
      },
      swiperB() {
        return this.$refs.awesomeSwiperB.swiper
      }
    },
    methods: {
    	onSetTranslate() {
      	console.log('onSetTranslate')
      }
    },
    mounted() {
      console.log('this is swiper A instance object', this.swiperA, 'B instance', this.swiperB)
    }
	})