не можете использовать в vue мерцании - PullRequest
0 голосов
/ 02 февраля 2020

Я использую ползунок vue flickity, и у меня есть некоторые проблемы. Когда я хочу добавить ссылки на мои слайдеры, слайдер работает неправильно. Как это изображение:

enter image description here

Так как я могу решить проблему со ссылками?

Это мой код, MultipleSlider. vue:

    <v-container>
        <p class="display-1">آخرین محصولات</p>
        <flickity ref="flickity" :options="flickityOptions1" class="">
            <div>
                <router-link>
                    <v-btn class="custombtn" text @click="alert('awd')">
                        <v-icon>mdi-cart-outline</v-icon>
                        خرید
                    </v-btn>
                </router-link>
                <img height="200" src="../assets/mainProducts/digital-video-camera-video-high_19-117521.jpg" alt="">
                <p class="text-center">دوربین جدید با کیفیت HD</p>
            </div>
            <div>

                <router-link>
                    <v-btn class="custombtn" text @click="alert('awd')">
                        <v-icon>mdi-cart-outline</v-icon>
                        خرید
                    </v-btn>
                </router-link>
                <img height="200" src="../assets/mainProducts/digital-video-camera-videography_19-117527.jpg"
                     alt="">
                <p class="text-center">دوربین فیلم برداری با کیفیت 4K</p>
            </div>
            <div>

                <router-link>
                    <v-btn class="custombtn" text @click="alert('awd')">
                        <v-icon>mdi-cart-outline</v-icon>
                        خرید
                    </v-btn>
                </router-link>
                <img height="200" src="../assets/mainProducts/measuring-tape-measure_19-132467.jpg" alt="">
                <p class="text-center">متراژ 5 متری با کیفیت</p>
            </div>
            <div>

                <router-link>
                    <v-btn class="custombtn" text @click="alert('awd')">
                        <v-icon>mdi-cart-outline</v-icon>
                        خرید
                    </v-btn>
                </router-link>
                <img height="200" src="../assets/mainProducts/sunglasses-background_19-132601.jpg" alt="">
                <p class="text-center">عینک 3 بعدی و با کیفیت</p>
            </div>
            <div>

                <router-link>
                    <v-btn class="custombtn" text @click="alert('awd')">
                        <v-icon>mdi-cart-outline</v-icon>
                        خرید
                    </v-btn>
                </router-link>
                <img height="200" src="../assets/mainProducts/digital-video-camera-video-high_19-117521.jpg" alt="">
                <p class="text-center">دوربین جدید با کیفیت HD</p>
            </div>
            <div>

                <router-link>
                    <v-btn class="custombtn" text @click="alert('awd')">
                        <v-icon>mdi-cart-outline</v-icon>
                        خرید
                    </v-btn>
                </router-link>
                <img height="200" src="../assets/mainProducts/digital-video-camera-videography_19-117527.jpg"
                     alt="">
                <p class="text-center">دوربین فیلم برداری با کیفیت 4K</p>
            </div>
            <div>

                <router-link>
                    <v-btn class="custombtn" text @click="alert('awd')">
                        <v-icon>mdi-cart-outline</v-icon>
                        خرید
                    </v-btn>
                </router-link>
                <img height="200" src="../assets/mainProducts/measuring-tape-measure_19-132467.jpg" alt="">
                <p class="text-center">متراژ 5 متری با کیفیت</p>
            </div>
            <div>

                <router-link>
                    <v-btn class="custombtn" text @click="alert('awd')">
                        <v-icon>mdi-cart-outline</v-icon>
                        خرید
                    </v-btn>
                </router-link>
                <img height="200" src="../assets/mainProducts/sunglasses-background_19-132601.jpg" alt="">
                <p class="text-center">عینک 3 بعدی و با کیفیت</p>
            </div>
        </flickity>
    </v-container>

</template>

<script>
    import Flickity from 'vue-flickity';

    export default {
        components: {
            Flickity
        },
        data() {
            return {
                flickityOptions1: {
                    initialIndex: 4,
                    prevNextButtons: true,
                    pageDots: false,
                    wrapAround: true,
                    groupCells: true,

                    // any options from Flickity can be used
                },

            }
        }, 
    }
</script>
...