Simple Carousel/Slider with VueJS. Demo here: https://www.benoitz.com/p/simple-carousel-slider-with-vuejs

register_slider.js

new Vue({
  el: '#my-vue-app',
  components: { 'vue-slider': VueSlider }
});

slider.html

<div id="my-vue-app">
  <vue-slider></vue-slider>
</div>

slider.js

VueSlider = {
  data: function() {
    return {
      visible: false,
      items: [],
      visibleItems: [],
      itemWidth: 0,
      itemMargin: 8 * 2,
      wrapperStyle: {
        width: '10000px',
        transform: 'none',
        transition: '1s',
        clear: 'both',
        height: '100%'
      }
    };
  },
  mounted: function() {
    var items = [];
    for (var i = 1; i < 50; i++) {
      items.push('<div style="padding-top: 60px"> \
                   Slide ' + i +
                 '</div>');
    }
    this.initItemWidth();
    this.onItemsLoaded(items);
  },
  beforeDestroy: function() {
    if (this.animation) {
      clearTimeout(this.animation);
    }
  },
  methods: {
    onItemsLoaded: function(items) {
      this.items = items;
      this.visibleItems = this.items.slice(0, 4);
      this.visible = true;
      this.startAnimation(3000);
    },
    initItemWidth: function() {
      this.itemWidth = this.calculateItemWidth();
    },
    calculateItemWidth: function() {
      var width = this.$el.offsetWidth;
      var visibleItem = 3;
      if (width <= 640) {
        visibleItem = 1;
      } else if (width <= 990) {
        visibleItem = 2;
      }
      return (width / visibleItem) - this.itemMargin;
    },
    startAnimation: function(timeout) {
      if (timeout == null) {
        timeout = this.randomInt(4, 8) * 1000;
      }
      return this.animation = setTimeout(((function(_this) {
        return function() {
          var xTranslation;
          xTranslation = 0 - (_this.itemWidth + _this.itemMargin);
          _this.wrapperStyle.transition = '1s';
          _this.wrapperStyle.transform = "translate(" + xTranslation + "px, 0px)";
          _this.resetAnimation();
          _this.startAnimation();
        };
      })(this)), timeout);
    },
    resetAnimation: function() {
      return setTimeout(((function(_this) {
        return function() {
          _this.updateVisibleItems();
          _this.wrapperStyle.transition = 'all 0s ease 0s';
          _this.wrapperStyle.transform = 'none';
        };
      })(this)), 1000);
    },
    updateVisibleItems: function() {
      this.items.push(this.items.shift());
      this.visibleItems = this.items.slice(0, 4);
    },
    randomInt: function(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
  },
  template: '<div v-show="visible"> \
               <div style="overflow: hidden; height: 172px"> \
                 <div :style="wrapperStyle"> \
                   <template v-for="item in visibleItems"> \
                     <vue-slider-item :item="item" :item-width="itemWidth"> \
                     </vue-slider-item> \
                   </template> \
                  </div> \
                </div> \
              </div>',
              
  components: { 'vue-slider-item': VueSliderItem }
};

slider_item.js

VueSliderItem = {
  props: ['item', 'itemWidth'],
  data: function() {
    return {
      itemStyle: {
        width: 0,
        borderRadius: '5px',
        float: 'left',
        height: '100%',
        marginLeft: '0.5rem',
        marginRight: '0.5rem',
        color: '#fff',
        fontWeight: '700',
        fontSize: '2rem',
        textAlign: 'center',
        backgroundColor: 'rgba(112, 193, 179, 1)'
      }
    };
  },
  created: function() {
    return this.itemStyle.width = this.itemWidth + 'px';
  },
  methods: {
    updateWidth: function(newWidth) {
      return this.itemStyle.width = newWidth + 'px';
    }
  },
  template: '<div v-html="item" :style="itemStyle"></div>'
};