Overview using a carousel with tiny-slider.js

by Anurak Sumranphan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<div id="app">
  <v-carousel>
    <v-carousel-slide href="/">
    </v-carousel-slide>
  </v-carousel>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

const VCarousel = {
	props: {
  	responsive: Array
  },
  
  computed: {
    carouselStyles () {
      return []
    }
  },

	template: `<div class="carousel" style="${this.carouselStyles}"><slot /></div>`
}

const VCarouselSlide = {
	props: {
  	href: String
  },
  
	template: `<div class="carousel-slide">
  	<router-link to="${this.href}">
    	<slot />
    </router-link>
  </div>`
}

Vue.component('v-carousel', VCarousel)
Vue.component('v-carousel-slide', VCarouselSlide)

new Vue({
  el: "#app"
})