Как использовать миниатюрную гладкую карусель в Vue. JS - PullRequest
Новая
       31

Как использовать миниатюрную гладкую карусель в Vue. JS

0 голосов
/ 03 февраля 2020

Я использую Слик для Vue. js для миниатюрной карусели вот так https://codepen.io/pjmtokyo/full/JYyjew и все работает нормально, но не только нажимает изменение на основе, например, когда я нажимаю на миниатюры, а не меняю основную карусель.

Вот мой пример кода

шаблон:

image

Сценарий: 

export default {
    name: 'app',
    components: { Slick },
    data() {
        return {
            slickOptions: {
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1,
                cssEase: 'linear',
                fade: true,
                autoplay: true,
                draggable: true,
                prevArrow: '.client-feedback .prev-arrow',
                nextArrow: '.client-feedback .next-arrow'
            },
            slickOptions2: {
                speed: 300,
                slidesToShow: 5,
                slidesToScroll: 1,
                cssEase: 'linear',
                autoplay: true,
                centerMode: true,
                draggable: false,
                focusOnSelect: true,
                prevArrow: '.client-thumbnails .prev-arrow',
                nextArrow: '.client-thumbnails .next-arrow',
            },
        };
    },

    methods: {
        next() {
            this.$refs.slick.next();
        },

        prev() {
            this.$refs.slick.prev();
        }
    }
}

Как это сделать по мере необходимости

Спасибо

...