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

起初我使用了Zurb Foundation轨道，但是在从数据库传递多个图像时遇到了问题。所以我最终使用了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>

Answer 2

我目前正在使用carousel提供的bootstrap，这对我来说很合适。

你可以看到带有vue和vue-router的bootstrap轮播here和here的演示。

我也尝试了jssor slider，它也很容易使用，也可以选择not using jquery。

带引导程序的代码

<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。

Vuejs 2图像滑块

2 个答案: