Vue-awesome-swiper: Responsive slides

[VladStepanov]

I have a trouble with mobile slider, i want slide to be 100% width, but it sets huge width in px.
https://imgur.com/My8QBJL

also if i scroll to right, i will see next slides https://imgur.com/YFsJfUw

[giuseppeangri]

Hi, are there solutions for this issue?
Thanks

[CavalcanteLeo]

Im stucked at the same problem

[surmon-china]

Use breakpoints with Swiper.

API breakpoints
example code

[mptmadhushan]

you can use ->

breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}

[TakCastel]

Please responses aren't helping that much, issue still happening on my current project.

<template>
  <div class="block w-full">
    <div v-swiper:gallerySwiper="galleryOptions">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(image, index) in slides"
          :key="index">
          <img
            :src="image.source"
            :alt="image.alt">
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    slides: {
      type: Array,
      default: () => ([]),
      required: true
    }
  },

  data: () => ({
    galleryOptions: {
      loop: true,
      spaceBetween: 15,
      slidesPerView: '3',
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    }
  })
}
</script>

Is causing the page to grow extra large width when switching to mobile view.

[kirinnee]

1) Use an observer to observe parent size change (via observer API or other framework tools)
2) on resize, emit resize event

<template>
      <swiper ref='mySwiper' :onParentResize='onResize'>
               ... omitted for brievity
      </swiper>
</template>
<script lang='ts'>
   onResize() {
        Vue.nextTick(() => {
            this.$refs['mySwiper'].$swiper.emit('resize');
        })
   }
</script>

Note that you have to implement the onParentResize directive yourselves!

[tungdz6518]

@surmon-china the demo is wrong too when resize to mobile screen
https://ibb.co/cDnbcT6
By the way, see my issue #763