vue-slick icon indicating copy to clipboard operation
vue-slick copied to clipboard

slidesToShow doesn't work right

Open phuclh opened this issue 6 years ago • 0 comments

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.

Screen Shot 2019-06-25 at 11 21 53 AM

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. Screen Shot 2019-06-25 at 11 25 04 AM

phuclh avatar Jun 25 '19 18:06 phuclh