Vuejs 2 이미지 슬라이더

이전에 angularjs에서 flexslider를 사용했습니다. 저는 vue.js 2와 함께 laravel 5.3 프로젝트를 진행하고 있습니다.이 jsfiddle과 같은 슬라이더를 만드는 방법을 찾았습니다.하지만 원하는 것은 flexslider가 어떻게 동작하는지 같은 이미지에 화살표가 있어야한다는 것입니다.Vuejs 2 이미지 슬라이더

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 
     } 
    } 
    });

이렇게하는 패키지가 있거나이를 허용하도록 코드를 수정할 수있는 방법이 있습니까?

출처

2016-12-16 Phillis Peters

는이 테마처럼 화살표를 표시하는 뜻을? http://flexslider.woothemes.com/ – choasia

네, 실제로 비슷한 방식으로 작동하게하고 싶습니다. –

처음에는 Zurb Foundation 궤도를 사용했지만 데이터베이스에서 여러 이미지를 전달할 때 문제가 발생했습니다.

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

나는 scss를 추가했다 : slick = require('slick-carousel');

는 다음과 같이 그것을 초기화 : 그래서 이런 한 후 사용 I 설치 npm을 사용 slick carousel

require (웹팩)를 사용하여 결국 파일을 컴파일 할 때 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>

출처

2017-06-08 09:32:29

나는 현재 이 제공하고 있는데, 이는 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를 액세스 할 수 있습니다.

출처

2016-12-16 06:18:23 Saurabh

'Zurb Foundation'이 아니라'bootstrap'을 사용하고 있습니다. –

@PhillisPeters foundation.zurb은 [image 슬라이더] (http : //foundation.zurb.com/sites/docs/v/5.5.3/components/orbit.html)을 사용할 수 있습니다.이를 답변에 추가 할 것입니다. – Saurabh

'.vue' 컴포넌트를 사용할 때 문제가 있다고 생각합니다. 지난 1 시간 동안 저는 궤도 (https://foundation.zurb.com/sites/docs/orbit.html)를 기초 작업에서 성공시키지 않으려 고 노력했습니다. 그런 다음'.blade.php'파일에서 같은 것을 사용하려고 시도했는데, 그것은 매력처럼 작동합니다. –

Vuejs 2 이미지 슬라이더

답변

관련 문제