javascript - Vuejs 2 图像 slider

Question

之前在angularjs中用过flexslider。我正在使用 vue.js 2 开发一个 laravel 5.3 项目。我找到了一种创建 slider 的方法 jsfiddle但我想要的是像 flexslider 那样在图像上有箭头。

    new Vue({
    el: 'image-slider',
    data: {
        images: ['http://i.imgur.com/vYdoAKu.jpg', 'http://i.imgur.com/PUD9HQL.jpg', 'http://i.imgur.com/Lfv18Sb.jpg', 'http://i.imgur.com/tmVJtna.jpg', 'http://i.imgur.com/ZfFAkWZ.jpg'],
        currentNumber: 0,
        timer: null
    },

    ready: function () {
        this.startRotation();
    },

    methods: {
        startRotation: function() {
            this.timer = setInterval(this.next, 3000);
        },

        stopRotation: function() {
            clearTimeout(this.timer);
            this.timer = null;
        },

        next: function() {
            this.currentNumber += 1
        },
        prev: function() {
            this.currentNumber -= 1
        }
    }
    });

是否有执行此操作的程序包或是否有修改代码以允许执行此操作的方法？

Answer 1

起初我使用 Zurb Foundation orbit，但在从数据库传递多个图像时遇到了问题。所以我最终使用了 slick carousel

我使用 npm 安装然后使用 require(webpack) 像这样: slick = require('slick-carousel');

然后像这样初始化它:

   updated: function () {
        $('.gallery').slick({
            autoplay: true,
            dots: false,
            arrows: true,
            responsive: [{
                breakpoint: 500,
                settings: {
                    dots: false,
                    arrows: true,
                    infinite: true,
                    slidesToShow: 1
                }
            }]
        });

然后我不得不在编译我的 SASS 文件时添加 scss 文件，如下所示:

  mix.sass([
    'app.scss',
    '../../../node_modules/slick-carousel/slick/slick.scss',
    '../../../node_modules/slick-carousel/slick/slick-theme.scss']);

然后使用 v-for 循环渲染图像:

<section class='gallery' v-if="images">
    <div v-for="img in images">
        <img :src="img" class="image">
    </div>
</section>