vue-slick
vue-slick copied to clipboard
slidesToShow doesn't work right
I have a vertical carousel.
<slick class="single-product-thumbnails w-auto md:w-80px lg:w-120px" v-if="product.images" ref="carousel"
:options="slickNavOptions"
class="slider-nav slick w-auto md:w-80px lg:w-120px">
<div v-for="image in product.images" @click="changeImage(image)">
<img :src="image" alt="" class="max-w-full h-auto"/>
</div>
</slick>
export default {
data() {
return {
quantity: 1,
mainImage: this.product.images[0],
slickNavOptions: {
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: true,
vertical: true,
verticalSwiping: true,
prevArrow: '<button type="button" class="block w-full"><i class="fas fa-angle-up text-2xl mx-auto hover:text-blue"></i></button>',
nextArrow: '<button type="button" class="block w-full"><i class="fas fa-angle-down text-2xl mx-auto hover:text-blue"></i></button>',
}
};
},
props: ['product'],
watch: {
product() {
this.reInitSlick(this.$refs.carousel);
}
},
methods: {
reInitSlick(slick) {
let currentIndex = slick.currentSlide()
slick.destroy()
this.$nextTick(() => {
slick.create()
slick.goTo(currentIndex, true)
})
},
changeImage(image) {
this.mainImage = image;
}
},
components: {
Slick
}
}
In the options, I set up to display 1 slide. However, It showed me 1.5 slides, not 1 slide. Any ideas for that? Thank you.
One more thing, normally when the slider was initialized the translated attribute should be transform: translate3d(0px, 0px, 0px), but mine is transform: translate3d(0px, -104px, 0px);. The second parameter was negative.
