How init Swiper in VueJS?

Question

first of all thank you for your time because I spent all the morning on this issue. How use the https://idangero.us/swiper module on vue.JS ? Indeed Swiper is on the page but the parameters seems to be not taken in count.

I tried also vue awesome swiper but I prefer use the official version without bug. I tried to init swiper also in a const just after the import.

<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>

For example with this code I need to have a space between each div or only 2 lines but i have no space and 3 lines... Thank you for your help.

Barham

Answer 1

You can now use this Vue Awesome Swiper it has everything you need

you can install it using the following command

npm install swiper vue-awesome-swiper --save

Disclaimer: I have no affiliation nor a contributor to this package, I'm just merely using it. so I recommend it

Trews

I know it is late. but it is important to keep the answer for reference – Trews

This seems more like an endorsement than an answer. – Allonge

Answer 2

You can simply use ref to init the slider like so:

<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)
  }
}

Update

They just released an official vue.js swiper component (only vue.js 3)

Gadgetry

Answer 3

This seem to work, not sure if it is a good way to do it

Parent

<Swiper
  :options="carouselOptions"
/>

Child (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>

Ophite

Answer 4

You can use swiper/vue like bellow. You can also check this code-sandbox link to how it works. Thanks.

<template>
  <swiper
    :slidesPerView="3"
    :spaceBetween="18"
    :loop="true"
    :navigation="true"
    :modules="modules"
    class="mySwiper"
  >
  <swiper-slide v-for="n in slideContents">Slide {{n}}</swiper-slide>
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';

  import 'swiper/css/pagination';
  import 'swiper/css/navigation';

  import './style.css';

  // import required modules
  import { Pagination, Navigation } from 'swiper/modules';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const slideContents = ['1','2','3','4','5','6']
      return {
        modules: [Navigation],
        slideContents
      };
    },
  };
</script>

Albaalbacete

Answer 5

I had the same problem a long time ago. Finally, I added Swiper from cdn, it worked well for me. I made a simple example for you (with Swiper) hope it will help you.

I took all the CSS props + swiper config from here so feel free to play with it. Let me know if you have any questions :) You can also check these docs, it has an explanation on how to config it with Vue & React, etc.

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>

Mockery

Answer 6

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

},

Junker