VueJS 2: Simple Image Slider with navigation and autoplay

index.html

<div id="slider">  
  <div class="slider">
    <ul class="slides" :style="{left:-width*current+'px'}">
      <li v-for="(slide,i) in slides">
        <img :src="slide" alt="">
      </li>
    </ul>
    <ul class="bullets">
      <li v-for="(slide,i) in slides" @click="selectSlide(i)" v-html="i==current ? '&#9679;' : '&omicron;'"></li>
    </ul>
    <a class="prev" href="#" @click.prevent="prevSlide">&#x25C0;</a>
    <a class="next" href="#" @click.prevent="nextSlide">&#x25B6;</a>
  </div>
</div>

script.js

new Vue({
  el:'#slider',
  data: {       
    slides: [
      'https://lorempixel.com/800/400/food/1',
      'https://lorempixel.com/800/400/food/2',
      'https://lorempixel.com/800/400/food/3',
      'https://lorempixel.com/800/400/food/4',
      'https://lorempixel.com/800/400/food/5',      
    ],
    current: 0,
    width: 800,
    timer: 0,
  },
  methods: {
    nextSlide: function() {
      this.current++;
      if (this.current >= this.slides.length)
        this.current = 0;
      this.resetPlay();
    },
    prevSlide: function() {
      this.current--;
      if (this.current < 0)
        this.current = this.slides.length - 1;
      this.resetPlay();
    },
    selectSlide: function(i) {
      this.current = i;
      this.resetPlay();
    },
    resetPlay: function() {
      clearInterval(this.timer);
      this.play();
    },
    play: function() {
      let app = this;
      this.timer = setInterval(function() {
        app.nextSlide();
      }, 2000);
    }
  },
  created: function() {
    this.play();
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

style.less

body{
background-color:#2C3E50;
}
#slider{
width:100%;
}

.slider {
  margin: 0 auto;
  padding: 0;
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;
  ul.slides {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: table;
    position: absolute;
    top: 0;
    transition: left 800ms;
    li {
      list-style-type: none;
      display: table-cell;
      img{
        width: 800px;
      }
    }
  }
  ul.bullets {
    width: inherit;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0 0 10px 0;
    text-align: center;
    z-index: 1;    
    li {
      list-style-type: none;
      display: inline;
      color: #fff;
      cursor: pointer;
      padding: 0 5px;      
      font-size: 20px;      
      font-family: sans-serif;          
    }
  }  
  .prev,
  .next{
    text-decoration: none;
    color: #fff;
    position: absolute;  
    z-index: 1;
    font-size: 42px;
    top: 43%;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  }
  .prev{
    left: 20px;
  }
  .next{
    right: 20px;
  }
}  

vuejs-2-simple-image-slider-with-navigation-and-autoplay.markdown

VueJS 2: Simple Image Slider with navigation and autoplay

Simple Vue Slider based on VueJS 2 and few lines of CSS. Navigation thru bulletpoints ane previous - next buttons. All this in 14 lines of HTML.

A Pen by Sebastian on CodePen.

License.