Open VladStepanov opened 5 years ago
Hi, are there solutions for this issue? Thanks
Im stucked at the same problem
Use breakpoints
with Swiper.
you can use ->
breakpoints: { 1024: { slidesPerView: 4, spaceBetween: 40 }, 768: { slidesPerView: 3, spaceBetween: 30 }, 640: { slidesPerView: 2, spaceBetween: 20 }, 320: { slidesPerView: 1, spaceBetween: 10 } }
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.
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!
@surmon-china the demo is wrong too when resize to mobile screen https://ibb.co/cDnbcT6 By the way, see my issue #763
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?
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