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

[Favalcodes]

Having issue with the lowest breakpoint which is 320px, instead of showing 1 slide, it's showing 2 slides even after putting a width of 100%, anyone experiencing this?