Vuejs 2画像スライダー

Question

私はanglejsで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のを）使用：その後、私はscssを追加する必要がありました

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

：このようにそれを初期化後 slick = require('slick-carousel');

ファイルをコンパイルするときSASSこのようなファイル：

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でブートストラップカルーセルhereとhereのデモを見ることができます。

私はまた、非常に使いやすいし、同様not using jqueryのオプションを持っていたjssor sliderを試してみました。

コードブートストラップと

<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にアクセスすることができる軌道を呼び出し画像スライダを、提供します。