Vuejs 2 图像滑块

Question

我之前在angularjs中使用过flexslider。我正在使用 vue.js 2 开发一个 laravel 5.3 项目。我找到了一种创建滑块的方法 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

我目前正在使用 carousel provided by bootstrap，它对我来说工作正常。

你可以看到 bootstrap carousel here and here 与 vue 和 vue-router 的演示。

我也试过jssor slider which was also quite easy to use and had option of not using jquery

代码 bootstrap

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="https://www.hallaminternet.com/assets/URL-tagging-image.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="http://www.shawacademy.com/blog/wp-content/uploads/2015/10/URL-1000x605.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="https://devcereal.com/wp-content/uploads/2016/05/URL-URI-URN-whats-difference.png" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Zurb 基金会还提供了一个图像滑块，它称为轨道，可以访问文档 here。

Answer 2

起初我使用 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>

Vuejs 2 图像滑块

Vuejs 2 image slider

javascript

flexslider

vue.js

vuejs2